We all know that the battle for browser supremacy has always been a struggle, but with standards slowly but surely improving, the usage of extensive, non-validating hacks is less. IE7, although still not quite as CSS capable as FireFox, was a huge step up from IE6. With, in the most part, people using IE7, FF2.0, Opera & Safari, we can begin to emit hacks from our style-sheets. However, there are people who have not made the upgrade to IE7. That is certainly understandable, when IE7 first came of age, it was very buggy, and in-fact I myself removed it just a couple of days after installation.

Firefox is, amongst web designers, seen as the best browser to design with…as it is the closest to web standards. Another reason, is the amount of web designer extensions that are available to implement during the design phase of any website. However, whilst browsing various web design forums, blogs, etc, I find a few people who seem bemused when told that Firefox is indeed the web browser to design for. Similarly, I once had a case where I was testing a website for someone. On my screen (IE7), his site aligned to the right, instead of the desired and popular effect of a centre alignment. I told him this, and his response was ‘Oh, it displays fine in FF & IE6′. I may be wrong, but to me, this suggests that this person, had not tested his site in IE7. If I can, for a moment, point you in the direction of a previous post which I made, here: http://www.csstrickery.co.uk/2007/10/02/browser-testing/, you can see that 16% of visitors on that site used IE7. If you revisit that site, the number has since risen to 18%, and IE6 dropped from 23% to around 19%, which is fantastic news for web designers. However, relating back to the alignment issue, for 18% of people to not see the website in the way the designer wants, is a problem. It is totally unacceptable for a site to display incorrectly in one of the most popular browsers. But, this person has since made no ammendment to his site. So, take heed, if your site displays incorrectly in either: IE6, IE7, FF2, it needs to be fixed. I’ll move on to hacks and fixes later in this post. Please note, I have omitted Opera and Safari from this because, 99.9% of the time, they display almost identical to FF.

Actually, when I first read the figure ‘18%’, I was surprised. You would think it to be higher. If you would like to see the stats, visit: http://www.webreference.com/stats/browser.html. However, in my searching, I have found different stats on W3 schools: http://www.w3schools.com/browsers/browsers_stats.asp. I shall leave you to decide which is best, however bear in mind that, W3 schools, is a site for mainly people with an interest in web design. It would be very interesting to view the browser stats for, say, The BBC, which would truely give us a representation of the average person’s browser. (If anyone can dig out these facts, please get in touch. Obviously full credit shall be given)

So, that shows us that, despite IE7 being a huge step up, there are still what I call ‘rendering’ problems. Sometimes, as designers, we must accept that our webpages will display with a subtle difference accross major browsers. It can be irratating, but must be accepted. Across the web stats, although they are different, they all seem to agree that, for the moment, IE is more popular than Firefox. So, why am I here, spending my time telling you to design for Firefox, when actually, more people use IE?

Firstly, when over 30% use FF, you have to include it, it goes without saying. Secondly, the extensions make it a fantastic designing tool, rather than just a browser. Thirdly, as I said earlier, it is the closest to ‘correct’ CSS display.

 So, finally, after all my ramblings so far, I have hopefully convinced you how important testing in different browsers is. I shall now move on to the code side, and how to fix display problems. A fantastic post on IE7 can be found here: http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer-7.shtml.

Displaying CSS to Just IE7
To display code to just IE7, you will need to create an entirely seperate stylesheet, and link it, in the <head> section, using the following code:
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" mce_href="IE7styles.css" /><![endif]-->

In the IE7 stylesheet, you will need to put only the CSS which is different. IE7 will search both the IE7 style-sheet and your default sheet, and use all the CSS code in the default sheet, but replace any code in the default sheet with code found in the IE7 sheet if there is any.

Displaying CSS to Just IE6
To display code to IE6, add * html infront of your styles. Example:
Style for IE7 & FF:
.box {
margin-left: 20px;
}
Style for IE6:

* html .box {
margin-left: 40px;
}


IE6 follows the bottom one, whilst other browsers do not. This can be handy as generally it is IE6 which needs the most amount of work on it.

Displaying CSS to Just FF
You don’t! That is the whole point of this article. Your stylesheet should be designed for FF and then changed/hacked for IE! If you understand that, you’ve successfully got the message in this article.

VALIDATE!
Before asking on a forum, validate your code! You will find, by fixing the errors it gives you, that a lot of the time your problems are solved. If you do not validate your code, and ask for help, the first reply will be ‘Validate’.
HTML Validator: http://validator.w3.org/
CSS Validator: http://jigsaw.w3.org/css-validator/

I hope you enjoyed this article,

 Jack

Categorised under: Browsers, CSS, Design & Layout, Designing a Website by Jack F