No replies
natbob1
Offline
newbie
Last seen: 11 years 19 weeks ago
Timezone: GMT-3
Joined: 2009-05-17
Posts: 1
Points: 0

When you scroll down the page here in IE 7 (at least, I haven’t checked in IE 6): http://ppchog.info/, sometimes the border of the left hand side of the content box is disrupted. The layout relies on four background images being painted over each other and every so often when you scroll a line of text and the border of the container to the left of the text is filled with the background color. The error goes away after IE re-renders the page such as if you minimize IE or select the text. Attached is the HTML and classes referenced.

Markup:

<div class="box" id="footer">
  <div class="boxhead">
    <div class="foot content">
      Park Place Church of God<br/>
      158 Fake Road Newmount, Ohio<br/>
      Phone: 458-4586<br/>
    </div>
   </div>
  <div class="filler"></div>
</div>

CSS:

.box {
  margin: 10px 10px 10px 0;
  width: 850px; 
  background: url(right.gif) no-repeat bottom right;
  font-size: 100%;
}
.boxhead {
  background: url(rightTop.gif) no-repeat top right;
}
.foot {
  text-align: center;
}
.boxhead .content {
  background: url(leftTop.gif) no-repeat top left;
  margin: 0;
  padding: 40px 30px 5px;
  color: black;
  font-size: 1em;
  line-height: 1em;
}
.filler {
  background: url(left.gif) no-repeat bottom left;
  margin: 0;
  padding: 5px 30px 31px;
}

Attached are the incorrect and correct renderings.
NOTE: The bug is intermittent and sometimes you have to scroll back and forth a few times to get it to work.
Any help would be greatly appreciated.

AttachmentSize
ss1.gif4.81 KB
ssright.gif6.5 KB