CSS compatibility in Internet Explorer 6, 7 and 8

Browser Compatibility October 14th, 2009 @ 13:10

I just came across this article in Smashing Magazine about the CSS differences in Internet Explorer 6, 7 & 8.

Nothing new really, but a good summary of what works and what doesn’t. The consensus is of course that you have to be aware of that IE6 pretty much can’t handle anything, so we’re still bound to write old code to be compatible with it. Sad but true!

Make the first comment

Interesting tool for comparing browser versions

Browser Compatibility September 24th, 2009 @ 14:09

I stumbled upon Expression SuperPreview, a really neat tool for comparing different versions of web pages.

It basically lets you enter the URL (local or public) of  a web page, and allow you to compare images of different browser versions. Compard to other tools, like BrowserShots, it’s got the handy addition to also inspect and compare DOM elements in the views.

Slim & Free or Fat & Premium

There’s a free, slimmed version available for Internet Explorer (6+) comparisons and a “premium” version included in Expression Web, where you can compare with Firefox and other browsers you may have installed. The premium version is available as a 60-day trial, and the licence is priced at $149 USD, which could prove to be money well spent.

I usually test my apps in IETester and on a virtual machine, but I’ve downloaded the 60-day trial of SuperPreview and will give it a go.

2 Comments »

Day-to-day Internet Explorer Compatibility Issues

Browser Compatibility June 23rd, 2009 @ 10:06

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…

Make the first comment

A campaign with a good point

Miscellaneous March 23rd, 2009 @ 11:03

Got a link sent to me regarding a campaign aimed to “Bring down IE6“. Let’s hope they accomplish something, because that would make the web development life a lot easier… :-)

Make the first comment