7 Years
Discussion Span
Last Post by Troy III

Design with Firefox first. Then fix the bugs in the IE version.

Never put size styles (width, height) and surrounding styles (margin, border, padding) on the same tag or in the same stylesheet style. If you do, IE will render them differently than any other browser does.

Instead, nest two tags, putting the size styles on one and the surrounding styles on the other. Then all browsers will render them the same.

Note that IE renders font characters one pixel wider than FF does, but reduces the space between characters by 1 pixel.

If you use tables, define the vertical alignment. IE and FF have different defaults.


I second MidiMagic, work and test everything in Firefox first, then fix the bugs that IE creates. To target IE with its own css use this:

    <!-- Meta tags, title, etc. goes in here -->
    <link rel="stylesheet" href="default.css" type="text/css" /> <!-- Normal stylesheet -->
    <!--[if lte IE 7]>
      <link rel="stylesheet" type="text/css" href="default_ie7.css" /><!-- Stylesheet which targets IE 7 or less -->
    <!-- Content goes in here -->
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.