A Few Words About Our Host

Drew StaufferAn industry design veteran who has successfully conquered both coasts, Drew Stauffer combines innovation with web standards to bring a blend of usability and creative vision to every project. As Director of Development for Wildfire Productions and CEO of Alibi Productions, Drew leaves no development stone unturned. He has published many articles on web standards and has been featured on WebProNews and Google News, and his companies count The Hyatt, BMW, and Michelin among their many satisfied clients.

Recent Posts

IE Positioning Is the Devil

Posted on Monday, June 04, 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.


Join the conversation and leave a comment

Leave a Comment

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




Please enter the word you see in the image below:


Missy November 13, 2007

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.



Topics Of Discussion



Who I Read



What Keeps Me Busy