When working with web sites, you often come across compatibility issues due to the users’ variations in browser usage. The vast majority (around 70-75%) of the users still use Internet Explorer as their browser, while most of the development is done in Firefox (thanks to the excellent Firebug and similar tools).
Hence, from time to time you need to adjust your code to make it work in all – well, actually it’s mostly about making it work in IE too, as it’s not as good as the others in following standards – browsers.
A handful of issues
A few days ago, I was testing a site in IE (both 6 and 7) and figured I might as well write down the (CSS) issues I came across:
- Issue: Opacity animation of text looks jagged.
Solution: Adding background-color to the animated element. - Issue: Some elements get “magic” padding/spacing at the bottom, due to the whitespace in the code.
Solution: Adding overflow: hidden to the element(s). - Issue: Elements within links do not inherit text-decoration, especially on :hover.
Solution: Set text-decoration on inner elements too, e.g. text-decoration: none. - Issue: Right floated elements without a set width expands to 100%.
Solution: Always set width of floated elements – particularily those floating to the right.
Note: The W3C CSS2 specs used to state that floated elements require an explicitly set width, but that section has now been removed. Do note that it’s probably good practice to set width on floated elements if it’s vital to always keep them next to each other. - Issue: Lists (ul li) treating list-style-position and margins differently in FF and IE.
Solution: Always use list-style-position: outside and margin-left instead of list-style-position: inside. - Issue: Lists with images gets no padding to text.
Solution: Adding padding-left to the list element (li). - Issue: Block elements aren’t centered in Internet Explorer.
Solution: Make sure to set both side margins to auto and text-align: center.
Note that these are only a handful of the issues that you can come across.
Position is Everything
Apart from Googling answers to CSS issues, I’ve got a favourite site for finding and solving Internet Explorer related problems: Position Is Everything. After a while, you know these issues by hand, but until you do, it’s really a good place to get help before tearing your hair out…
