CSS Browser Issues & Solutions
(Working with IE & Firefox)

The biggest challenge facing web designers today is cross-platform compatibility. The following issues are primarily Internet Explorer related. I prefer workarounds to hacks. The main difference being IE conditional code. Learn these cold, and you'll move from a beginner to advance CSS developer in no time.

  1. IE width of containers and margins are narrower than Firefox.
    This is your basic "Box Model Bug" I've seen this explained so many times in so many ways, mostly over explained.
    Here's the problem:
    IE includes border and padding in calculating your total object width, so it might be narrower than Firefox.

    The problem is not from either alone when you design a page, but that they are different. That means you have to tell each browser something slightly different to get the same display. div {
    margin: 10px;
    padding: 10px;
    border:solid 5px #00FFFF;
    width: 20px;
    }

    IE total:20px* + margin
    Firefox Total: 40px* + margin

    *Since padding, margin and border occur on two sides, the number, if used in calculation is doubled.

  2. Text overflows container in non-IE browsers
     IE sees the width attribute as other browswers see "min-width"
    Avoid hacks and use the max-width property in IE
    If you’ve ever tried to use the max-width CSS property, you’ll know IE doesn’t support it. Sometimes you just cannot code around it. Here's a one line CSS addition to your CSS. Add this to your code wherever you need max-width. Note: you can use it for min-width too! Just reverse the greater-than symbol.

    • .class { max-width: 640px;}

      <[! --[if IE]>
      .class { width: expression(this.width > 640 ? 640: true); }
      < ![endif]-->

  3. hasLayout property solves width, height, CSS Opacity, transparency and other positioning and appearance issues in IE.
    CSS hasLayout is a read-only property in IE that is set to false by default. Sadly, that means even if you specify a width on some objects, it will be ignored. To work around this, you can apply any of the following layout values to make it read hasLayout = true, and therefore have IE read the height, width, opacity and other hasLayout contingent properties. Note: Also in IE 6, If you're still having problems, check your Doctype declaration at the top of your page.

    If your!DOCTYPE declaration = strict, inline elements ignore the width property and the height property.

    CSS property Value
    display inline-block
    height any value
    float left or right
    position absolute
    width any value
  4. Layer goes behind another in IE despite having z-Index.

    Relatively positioned elements with two different z-Indexes have their own z-Index world, according to IE. The browser appears to ignore the z-Index setting. You need to have both elements in the same position:relative container for z-index to work.

    Here's an IE z-Index fix that worked for me while allowing me to keep the width setting in Firefox.

    .nav LI {
    padding-right: 0px;
    padding-left: 0px;
    margin: 0px;
    width: auto;
    position:relative;
    <[!--[if IE]>position:static ; < ![endif]-->
    }


    See: positioning for more css code info