Don’t we all love IE when trying to make sue a site looks good…
I was doing the layout for my other (personal) blog. I started by making it look like I wanted on firefox. All was fine. Then tried to make it display properly on IE6. This took some hassles, but worked out eventually (apart from not being able to get the transparent png effect working – so had to downgrade the style for IE6).
Then I tested on IE7. Oh horror. The entire content of the site disappeared. Obviously the transparent png effect was working (which also indicates that the “html>body” CSS selectors are clearly recognized by IE7, which was not the case in IE6). However, the actual text was invisible. As another positive effect the scrollable region is also working properly in IE7 (needed a little extra margin to display the scrollbar in IE6).
The main problems I faced are :
- disappearing content. I eventually fixed this by enclosing the disappearing bits into another ”
” pair.
- once that was fixed, the scroll bars were behaving weirdly. Basically, the scroll bar was visible, but most of the content did not actually scroll unless you pressed f5 to refresh the page. I fixed this by removing all the “position: relative” bits.
There were some other problems too, but these were minor.
The three main things to remember from this exercise
- Use conditional comments (in the html only) to have some IE specific content (like a recommendation to use firefox)
- The “* html” selector only works in IE6 and below.
- The “html>body” selector does not work in IE6 and below.