Firefox Hacks

Several elements display differently in Firefox to other browsers, most notably, Internet Explorer.

Happily, the browsers behave sufficiently differently in their ability to read CSS code, that it is possible to tweak (or HACK) the code to behave as desired. Below is a selection of cross browser issues, and their solution.

List Positioning

In Internet Explorer, to position a list to the left-most, we simply set the left margin of the list to 0ems. (see Vertical Navigation Lists)

However, in Firefox this does not change the position of the list. In order to move the list to the left in Firefox, we must put a negative left margin on it. The amount of this varies depending on the size of the text you are using, normally between -2 and -4 em.

However, changing it to work in Firefox will of course, move it too far to the left in Internet Explorer 6. So we need a hack. For hacks, you invariably have to modify the code by hand, so the following is not available in Dreamweaver interface format.

This is the CSS code for a Firefox hack, which should be placed beneath the normal ul style.

The html>body part is valid code, but is not read by Internet Explorer 6, which skips the entire hacked style, and only executes the original margin-left: 0em; ul style which it read previously.

This style makes the list sit in the correct position in Firefox and Internet Explorer 6. However, Internet Explorer 7, which displayed ok without this hack, can also read this hack, and is now too far to the left. So we need to do a little more work.

Adding a set of CSS comment tags /**/ to the style, disrupts Internet Explorer 7's ability to read the hacked style, and it executes the margin-left: 0em; which it read previously.

For lists inside lists, or nested lists, just double up the ul, to ul ul. You may also need to adjust the left margin value.

Summary

• Use html>body if Firefox and Internet Explorer 7 display the same in the first case.
• Use html>/**/body if Internet Explorer 6 and Internet Explorer 7 display the same in the first case.

• AA
• XHTML
• CSS

© ilikecake 2005-2008