vertical margin issues IE

buggy IE

[SaminOz]

Does anyone have a tip or a thread on the following?

I have three buttons floated left. IE7 and Moz render at the prescribed vertical margin of 10px - IE6 seems to double this. It also added much margin around the page that I am struggling with - but first things first.

I have ID'd all items and specified their margin requirements. I have applied the "holly fix" to the parent div.

I am aware of the left-right doubling, but so far unaware of how to deal with top/bottom issues - if that is my problem.

Code is below: (if it looks heavy - it's just mods trying to chase this down - i'll contract once i've traced the issue).

img#vButton1 {
float: left;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0px;
}

img#vButton2 {
float: left;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0px;
}

img#vButton3 {
float: left;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0px;
}

Best,
Sam.

[swa66]

Horiziontally, it's the well known IE bug: look for "double margin" bug.

Never had it vertically that I can remember, do the same fixes work ?

There is an easy fix: reduce the margins by half in the IE6 conditional comment.

[SaminOz]

Hey swa66 - well conditional comments was the eventual way to go. The reduction in the margins was completely unproportional to the actual requirement (-40px) and I had to CC way too many lines - so not an elegant solution, but as you said, a solution nevertheless.

Thanks heaps for your help - always appreciated.
Sam.