Hello!

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 some webbrowsers (works fine with latest firefox though).

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. It's just a small gap, but it looks annoying when I have made alot of squares. For this I can't publish my website, it's just too embarrassing! 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

The problem browser is IE right ?? Where is the gap appearing ?

LadynRed: Thanks for the reply, the problem appears at the footer (footer_news) where a gap is created in IE.

Try putting the footer image inline into the HTML rather than as a bg image. I wrestled with a similar issue the other day, and putting the image inline solved the problem for me.

overflow?