The constant web browsers war is more about the chaos and the lack of consistency across the board in implementing the recommendations of the W3C (Worldwide Web Consortium) regarding HTML and CSS. That leaves web developers in the middle of a land mines field. Those pour souls have to gather all the courage it takes to tiptoe out that mess when designing or updating web applications.
It’s up to the web designer/developer to make sure the web site displays or degrades gracefully on all major web browsers: Firefox, Opera, Chrome, Safari and Internet Explorer (IE6, IE7, IE8). Reaching that goal seems daunting if not impossible.
How can one make all those web browsers get along?
For years now web developers have been pointing the accusatory finger to Internet Explorer: J’ACCUSE!!
Well, a few years back Netscape 4 was sitting on the trial bench, accused of slowing down the web. These days, all eyes are on IE6 . Internet Explorer 6 does not support most of the new HTML & CSS features which take web page design to the next level: CSS round corners, PNG graphics, and the CSS :hover pseudo-selector is limited to the anchor tag.
Those are just a few of the potholes along a winding road. The need to make websites display well on all major browsers, despite all the shortfalls mentioned earlier, puts a brake on how far a web designer/developer can push the envelope. More and more time is spent on a given project tweaking and “hacking the code” to be compatible with IE6 and others. And that “my friends” can not only be a real nightmare for the web designer, it’s a big impediment to the evolution of the web.
Since you will have to include IE6 anyway in the list a web browsers to check your website again, here are a few nuggets to save you tremendous web development time and frustration. At any stage in your web design process (HTML/CSS):
- Avoid applying padding to main CSS layout containers (div tags) at all cost
- Use margins in the nested container to simulate the left and right padding on the closest parent container.
- Wrap the text in paragraph (<p>) tags to which you applying margins to achieve the padding.
- IE6 doubles the margin of the floated element on the direction of the floating (left or right)
- Always specify a width of any floated HTML element
- Apply both the float and inline display properties to list items of your horizontal navigation
- If you must hack, create a separate CSS style sheet where you would group all the styles aimed at IE6 and use the Internet Explorer’s conditional comments.
At the end of the day/project, web development is all about matching the capabilities of the end-user’s web browser. It’s less about the artistic talent of the graphic artist or the programming skills of the web programmer.
“This web site is best viewed in web browser X or Y” is just an excuse to avoid spending extra time checking your design compatibility with other major web browsers. It might seem cost effective at first but it does not make business sense: you are loosing potential customers user web browsers different than your target browser.
All you need is to preview your site design at crucial steps during the web development process to fix potential problems early on. In the end you will achieve a design that will accurately display your website on all major web browsers. It may also be time to target smartphones as well.
IE6 is still here and breathing. We just have to deal with it.
Tags: browser, comments, conditional, css, explorer, html, ie6, internet, web
Posted in CSS Tips and Tricks, HTML Tips
How To Make IE6 Play Nice with Other Web Browsers
March 20, 2010It’s up to the web designer/developer to make sure the web site displays or degrades gracefully on all major web browsers: Firefox, Opera, Chrome, Safari and Internet Explorer (IE6, IE7, IE8). Reaching that goal seems daunting if not impossible.
How can one make all those web browsers get along?
For years now web developers have been pointing the accusatory finger to Internet Explorer: J’ACCUSE!!
Well, a few years back Netscape 4 was sitting on the trial bench, accused of slowing down the web. These days, all eyes are on IE6 . Internet Explorer 6 does not support most of the new HTML & CSS features which take web page design to the next level: CSS round corners, PNG graphics, and the CSS :hover pseudo-selector is limited to the anchor tag.
Those are just a few of the potholes along a winding road. The need to make websites display well on all major browsers, despite all the shortfalls mentioned earlier, puts a brake on how far a web designer/developer can push the envelope. More and more time is spent on a given project tweaking and “hacking the code” to be compatible with IE6 and others. And that “my friends” can not only be a real nightmare for the web designer, it’s a big impediment to the evolution of the web.
Since you will have to include IE6 anyway in the list a web browsers to check your website again, here are a few nuggets to save you tremendous web development time and frustration. At any stage in your web design process (HTML/CSS):
At the end of the day/project, web development is all about matching the capabilities of the end-user’s web browser. It’s less about the artistic talent of the graphic artist or the programming skills of the web programmer.
“This web site is best viewed in web browser X or Y” is just an excuse to avoid spending extra time checking your design compatibility with other major web browsers. It might seem cost effective at first but it does not make business sense: you are loosing potential customers user web browsers different than your target browser.
All you need is to preview your site design at crucial steps during the web development process to fix potential problems early on. In the end you will achieve a design that will accurately display your website on all major web browsers. It may also be time to target smartphones as well.
IE6 is still here and breathing. We just have to deal with it.
Tags: browser, comments, conditional, css, explorer, html, ie6, internet, web
Posted in CSS Tips and Tricks, HTML Tips