CSS tip for getting Internet Explorer & Firefox to play together

As we found last week, the same CSS instruction sometimes produces a completely different result in Internet Explorer vs Firefox. This can be especially frustrating when you are trying to get a layout, borders etc to be “pixel perfect” !!!

One solution for IE6 is that you can actually do something like this in the CSS:
{ margin-left: 5px !important; margin-left: 20px }

Firefox will see !important as being, well, important – and use that setting regardless of what else is applied to margin-left – whereas IE6 always takes the LAST instance. You don’t want to do this too often, because it bloats the code, but it’s a nice shortcut if you’re tearing your hair out.

Have yet to test if this rule holds for IE7 and IE8, but a Google search seemed to suggest that it treated !important in the same way as Firefox.

One thought on “CSS tip for getting Internet Explorer & Firefox to play together

  • September 8, 2008 at 12:21 pm

    I was trying to figure out where I have seen this… then it came into my mind that you have it on UTS Online’s discussion board as well.

    Nonetheless, this is quite useful; might help resolve my webpage problem as well! (when I do get time to look at it)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.