IE Positioning Is the Devil

Posted on June 4, 2007

Positioning websites with CSS can be tricky when testing on multiple browsers. On a recent development project, I was close to completing the site when I realized I had a duplicate indent bug when previewing the site in IE. The content area inside of one of my floats was doubling the margin that I was placing on the box.

Here is what my CSS looked like:

.floatbox {
float: left;
width: 150px;
margin: 5px 100px 5px 0px;
/*The second value, 100px applies to the right margin */
}

Normally, this CSS would be fine, but in IE my margin on the right was doubling to 200px. The extra margin threw off the entire page. Images didn’t line up, spacing wasn’t consistent…needless to say it wasn’t going to work.

A friend of mine, Andy who has helped me out with many a developing quandary told me about positioniseverything.net. This site is a fantastic resource for any bugs that you run across in IE. The fix was as simple as adding { display: inline; } to my float. Here is a more detailed description of the IE Doubled Float-Margin Bug and a better summary of the results.


» See Related Categories In:

Comments

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments

2 Comments so far
  1. IE Positioning with CSS - Alibi Productions June 4, 2007 3:38 am

    [...] I have a full summary with images of what happened on my other site, Drew Stauffer. If you’ve had any other problems with IE, or more importantly solutions on how to fix the problems, I would love to hear about them. [...]

  2. Missy November 13, 2007 10:38 pm

    Don’t believe everything PIE tells you… a lot of their so-called solutions are so far out of date it’s unreal.
    The best way forward is always (and I mean always) go XHTML Transitional if you’re unsure, and only go Strict if you’re sure what you’re doing. Even IE will comply without hacks if you truly know what you’re doing with CSS.