Background freaks when scrolls down...

[Tijmen]

The idea is that you have a 1px thick black line. 5px lower there is the text with a light grey background. Underneath the text there is space for content which has a dotted 1px border.

This works fine in Firefox. But when you go to IE and scroll down, a part of the greybackground from the text disapears. It doesn't alway happen, but most of the time it does.

The same with the dotted border, it doens't disapear but the space between some of the dots are messed up.

If your reload the page everything is fine again, until you scroll down. Any idea's how to fix this?

HTML

<div id="contentfeatured">
<div class="text">Travel Blog</div>
<div id="contentbox"></div>
</div>

CSS

#contentfeatured {
border-top: 1px solid #000000;
padding: 5px 0 5px 0;
}

.text {
font: bold 12px, "Arial", Helvetica, sans-serif;
color: #1A1A1A;
padding: 5px 0 5px 10px;
background-color:#F3F3F3;
margin: 0 0 5px 0;
}

#contentbox {
border: 1px dotted #636161;
padding: 5px 0 5px 0;
margin: 0 0 10px 0;
}

[createErrorMsg]

the space between some of the dots are messed up

IE does not support the "dotted" border, turning it, instead, into a "dashed" border. No work around other than creating a dotted background image for the element, instead.

But when you go to IE and scroll down, a part of the greybackground from the text disapears.

Sounds like a problem that arises when you set height to 100%, but your CSS doesn't show any height properties. Are you using a valid DOCTYPE [w3.org] on your page? If not, try adding one and see if it gives more consistent results.

cEM