Forum Moderators: not2easy
I'm trying to build up a box with rounded corners and some more details using CSS. My major problem is that one of the pieces in this box fall away from the other in Internet Explorer.
Here is the code:
div.container_news {
width: 320px;
background: url(pics/news_middle.gif) repeat-y center center;
}
div.footer_news {
background: url(pics/news_bottom.gif) no-repeat center bottom;
width: 320px;
height: 8px;
}
div.topper_news {
background: url(pics/news_top.gif) no-repeat center bottom;
width: 320px;
height: 9px;
margin-top:17px;
}
And here is the html:
<div class="topper_news"></div>
<div class="container_news">
News Input Text
</div>
<div class="footer_news"></div>
My problem is that the last div class (footer_news) fall away from the other two in IE. It's just a small gap, but it looks annoying when I have made alot of squares. Some browsers manages to keep them all together so they form a nice box with rounded corners, but the most normal case is that they fall apart.
Anyone who could find a solution to this? It would really be a appreciated deed!
Sincerely,
Undrium
Don't ask me why, but adding an empty comment to your div:
<div class="footer_news"><!-- --></div>will fix the issue. I'm sure someone will jump in at this point with an explanation as to why.
[edited by: Robin_reala at 12:37 pm (utc) on June 6, 2007]
it's an IE bug where IE adds default line-height to empty elements, then IE6 and below incorrectly stretch the height of the div to accommodate the line-height. (2 bugs in 1) - The comment for some reason, simply tells IE the element is actually empty :o
It's actually happening on both the top and bottom divs but your positioning of the background image means it's likely not so visible in the top div .. try adding a background color to the two divs and you might see they are both taller than the 8/9px you have specified
you could position the background image for the bottom div top be "center top" that should hide the gap, or one other fix which would involve no changes to the HTML is to set the font-size on both divs to 1px or something small so the default line-height will still be smaller than the 8/9px height you are trying to achieve.
Suzy
