Aber LINKS Website – IE Specific CSS Problems and Solution

During my testing of the site (I feel it is necessary to test extensively on many browsers, operating systems and screen sizes – to ensure no users are needlessly excluded), I found that Internet Explorer displayed the site wrong – the “main area” was displayed 5px or so too high, and it’s side borders were eating into the nav bar. Looked messy, unprofessional, and with the reality that a lot of companies may be reluctant to get away from the horrible old IE browser, I needed to do something to allow IE users to view  the site properly.

Why?

Why does IE display it wrong when Firefox, Chrome, Safari, Opera, Konqueror etc all display it perfectly happily?

After a small amount of research, I found it is because IE does not render the W3C box model correctly. (W3C – World Wide Web Consortium – the people that make the standards and protocols that everyone should adhere to.) So every other browser complies with (at least this part) of the W3C recommendation, but IE still does not, or at least the IE8 that I have and the ones before it don’t. I found the information on why it doesn’t render correctly here.

So what to do? IE isn’t quite sure about heights, widths, margins and padding etc, but every other browser is. I decided I needed to make the site display properly in IE, as although in my opinion it is a terrible browser, many people still use it (9.51% of people to the LINKS site currently use IE – but bear in mind this includes a lot of university students, who are likely to be using newer, better browsers on personal computers).

How to pick out IE users

After trying to redesign my CSS so that it would work happily in both IE and others, (basically changing the code so IE displayed it properly, but then finding the now wrong code obviously displayed incorrectly in every other browser), I decided that IE needed to be using some different code to all of the other browsers. I found it is actually very easy to pick out the IE users, and give them some different code by using “<!– [if IE]>” in your code. What is that? Basically the code is singling out IE users with the [if IE], but it is put in a comment so all other browsers ignore it.

This “if” is actually quite versatile, as you can specify certain IEs [if IE 6] or if it is earlier than a certain one [if lt IE7] (lt for less than, gt for greater than). You can also use [if !IE] – if it is not IE. I found out about this here.

Fixing CSS for IE

So with the “if” in place to catch IE users, I now give them their own stylesheet (style2ie.css). This overrides/overwrites the previously given styelsheet that is for all pages. Other browsers will see their correct CSS, and ignore the IE one in the commented “if” statement.

This IE stylesheet is exactly the same as the normal one except that I have added 5px of padding to the bottom of my nav bar, to force the main area down by 5px. It’s a bit of a hack, but it works fine for my purposes. At this time, it is also a good idea to add “a img {border: none; } ” to your code, to stop IE putting blue boxes around all the links that it sees. See the snippet of code from my main CSS below. SiteNavigation is the div around the navbar. It doesn’t matter if you have the “a img” part available in the main CSS – it doesn’t seem to affect the other browsers. It is just for IE.

Code for IE