Here's a weird one for you: I have my header displaying a background image. There are three instances of the H2 on my test page. They work fine in Firefox 2 and 3. The first H2 appears fine, with the background and borders intact. Header #2 and #3 however do not display the background or border until I scroll down past the header and then back up, then only the bottom half of the image and bottom border appears. If I reload the page, they disappear again until I scroll past the header. I can't post the actual page, but here's the CSS for the H2. Everything looks fine and both the CSS and XHTML validates so I'm assuming this is some kind of weird display bug. A quick search didn't reveal anything so far so I'm hoping you guys have ran into a similar issue before. Please keep in mind that the CSS hasn't been optimized yet so yes, I know I can use a shorthand font definition. h2 { background: url("../images/post_background.gif"); font-size: 2.6em; font-family: "Times New Roman", Times, serif; font-weight: normal; color: #869BB5; letter-spacing: -1px; margin-bottom: 5px; text-align: center; border-top: 1px solid #4D545C; border-bottom: 1px solid #4D545C; padding: 5px 0; } Code (markup):
Figured it out. The bug is know as "The Peek-a-boo bug". I was lucky: all I had to do is set my headers to display inline. For more information, check out this website. Thread can be closed.