double margin in ie
i know this is a standard well known problem. searched for it, thought i found a stated fix (put display:inline on the div) but it didn't fix it.
a div followed by a heading. div has float:left put on it to make its border collapse/wrap round its contents. once float on the div margins making the gap between the box and the heading below it go wrong. so i use padding instead. this work on all but ie. in all it's fine, but in ie double the gap.
how to fix it ie?
addition: don't want to add height nor width to the div as that defeats the point of a flexible box. thanks.
another addition: the problem seems to be just in ie 7:
without seeing the code it's difficult. I'd have initially suggested the double margin bug but it could also be the 3-pixel jog depending on the code.
Do you have a link or some sample code that replicates this problem?
well yes but there's a lot of css which isn't applicable.
here's the link www.coXol-teXch.org/after-care-services2 (remove the two X's -- sorry to be a pain)
the box in question starts with this:
<div style="border:2px solid #ccc; padding:5px; float:left; margin:0; display:inline;">
as i say the excessive gap seems to be just in ie7 not other including ie5,5.5,6 amazingly. i don't have a pc just browsershots.org though so it's a bit tricky.
Sorry, the double margin and 3px jog bug affect spacing to the sides whereas this is obviously a probably underneath.
Therefore you won't need display: inline; unless you decide to use a left margin along with the float (the double margin bug is only present in IE6 and below anyway).
However, I've not actually seen this bug before but it seems to be caused simply by the commented out code that follows the image.
Removing the block that you have commented out seems to fix the problem :)
There's obviously a problem in IE6 whereby it's allocating enough space for the comments to proceed after a floated element which is definitely odd behaviour and I'd personally fix this by just removing the comments.
(comments can also cause problems in IE6 with the duplicate character bug so I don't tend to use them. If you mark up your HTML with semantic code and then use ID's and classes that are descriptive enough along with consistent indentation then you shouldn't really need comments within your HTML anyway).
Hope that helps. :)
i haven't tried it yet but assuming you're right, excellent, yes of course it helps :) i'd certainly not come accross that before. that's great, thanks.