Forum Moderators: not2easy
When using an <hr> as a spacer between two <div>s, I have set the margin and padding of the HR to zero. In FF and Opera this eradicates all margins and the divs and HR are aligned precisely next to each other.
In IE it adds a 14px margin underneath the HR - please see no example URLs thanks
Now I can solve this problem in IE6 using the!important hack, but this does not work in this instance in IE7. Does anyone have any suggestions?
The HTML/CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HR margin problem</title>
</head>
<body>
<div style="float:left;clear:left;background-color:#FFFFCC;width:400px;margin:0;">
<p>Content</p>
</div>
<hr style="clear:left;float:left;width:100%;height:1px;border:0;margin:0!important;margin:0 0 -14px 0;padding:0;color:#BFBFBF;background-color:#BFBFBF;top:0;" />
<div style="float:left;background-color:#CCCCCC;width:400px;margin:0;clear:left;">
<p>Content</p>
</div>
</body>
</html>
[edited by: SuzyUK at 4:59 pm (utc) on Feb. 20, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
Q. Aside from margins and padding, what else takes up space?
A. Content!
Now, I see that you've set the hr's height to '1px', but since IE 6 incorrectly interprets 'height' as 'min-height' [webmasterworld.com] the hr is probably the height of the element's line-height; it's this space you need to get rid of.
Fortunately there's an easy way to hide it; what happens if you try "
hr { overflow:hidden; }-b
nice thought that bedlam, but as far as I can see it doesn't work
did some searching again, as I seem to do periodically for an answer to this one, still can't find a thing about removing the default 'margin' (if that's what it is) from an <hr> in IE, there are some resourceful uses of overflow, negative margin hacks and "clip" but each one requires different other tweaks to compensate - I'd be eternally grateful if anyone has found the easy answer?
I still think the best answer ATM if you do want to keep the divider as an <hr> for semantics etc. is to put the <hr> inside a div, and style the div with a width/bottom border, you would still need the height/font-size/line-height = 0 - then visually hide the hr - not the best using an extra element, but best regards x-browser flexibility?
Suzy
edit reason = manners!
[edited by: SuzyUK at 8:14 pm (utc) on Feb. 20, 2007]
