Used to be we developers had to develop at least two sites: 1 for Mozilla and 1 for Internet Explorer.  Netscape was the biggest PITA and I am happy that browser was retired.  Now with Firefox, Safari and Chrome all committing to supporting W3C standards, more browsers is a very good thing.  Internet Explorer has come a long way to supporting the same standards although Microsoft likes to keep their browser special. 

Where is that extra margin coming from?

Sometimes, when floating an element or affecting its layout in some other seemingly unrelated way, you might introduce a little strip of space in your layout that you certainly hadn’t intended.  The best way to zero in on the element that is causing the issue is to set background colors of participating elements, using css, to various random colors.  This will make your elements solid so you can identify whether the space is inside the "blue" div or actually its child "red" div. 

Use Internet Explorers "IE Developers Toolbar" to inspect the browser’s interpretation of your document while its running.  Its similar to what you get with FireFox’s FireBug extension except that FireBug is to IE Dev TB what a heat seeking, laser guided missile is to a 5 pump pellet gun.  Nonetheless, its very useful.  If you aren’t using firebug with firefox yet, go get it immediately …and then come back and finish reading this post. 

Using the toolbar, or background color manipulation, to find the element that has the margin or padding added, you are very close to where you need to be to fix it.  Try to avoid adding negative margins to fix a problem caused by IE weirdness.  Sometimes you have little else and as a last resort can get you on to more important problems.

Look Around a Bit

Once you found your offending element (or pair of elements) don’t become too sure of yourself.  If the problem isn’t present in Firefox, its probably something unusual.  More often than not, I find that extra margin between two elements, where margins are explicitly set to zero, can be the result of a bordering child in one of the elements setting margin and pushing the parent’s sibling away.  It is NOT supposed to do that but we’re talking about some pretty complicated rendering based on competing scripted rules and behaviors and sometimes one rule causes a little hiccup.  I almost always find that I can modify how I am spacing child elements so that FF and IE behave the same. 

I am proud to say that I don’t believe I have any browser specific "hacks" in my css at this time.  I have certainly had to make some adjustments to accommodate browser weirdnesses but these I can live with.

If you just downloaded FireBug, go mess with the Edit Html feature and the css real time modifications.  Soooo cool.  If you don’t have it yet, choose a career that does not involve web development.  You are only causing yourself unneeded pain

This entry was posted on Monday, November 10th, 2008 at 8:16 am and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.