Faux Columns Problem - scolling up / down causes part of background image 2 disappear

[brianwilson71]

Hi All,

I have a problem with my Faux Columns. You can see an example on my live site at www.abipo.com/contact.html

Here you can see 3 sheets of paper (background images) that the content sits on top of. Basically, each 'sheet of paper' is made up of three background images:

1. a top image (both left and right top corners of the page)
2. a middle image (this is tiled vertically in the background behind all the content that is entered to form the main part of the 'page'
3. a bottom image (both bottom corners of the page)

Here is the very simple code that shows how to do this:

Code: Select all

#contentTop{
background: url(Images/ContentTopBGIndex.jpg) no-repeat;
}
#contentMdl{
background: url(Images/ContentMdlBG.gif) repeat-y;
}
#contentBtm{
background: url(Images/ContentBtmBG.gif) no-repeat;
}

The 'sheet of paper' containing the navigation buttons illustrates the problem. When you scroll down to the bottom of the page and then scroll back up again using your browser some of the background image disappears sometimes.

Does anyone have any idea why this is happening and also how to prevent it?

Thanks a million,

/Brian

[Lchad]

I couldn't replicate the problem in FF2.0 or IE 7. What browser are you using?

[brianwilson71]

Hi, thanks for replying. I should have said: this only seems to happen in good old IE6...

/Brian

[karinne]

I don't see a problem in IE6

[brianwilson71]

If you scroll down the page to the very bottom of the form (www.abipo.com/contact.html) the navigation buttons will scroll off the top of the screen. Then scroll up again until you see the navigation buttons again. Look for parts of the page disappearing (replaced with a grey horizontal thick line). If you don't see them then, scroll down and up a few times without releasing the mouse button. You should have to scroll no more than a few times to see the problem. I have been able to reproduce the problem easily on my home and work machine under IE6. Can you see it?

Thanks,

/Brian

[karinne]

Nope ... don't see any problem.

[Gwayn]

On IE 6.0.2 on WinXP SP2 i can see the problem you talk about.
It's like a sector (of 8-10 px height) don't repeat the background just before the menu list.
Can't imagine why but i saw this problem before with IE6, try to save the entire background image as a single file (without cut it in 3) and see if the problem persists, if the problem disappear... well... maybe you'll lose 1ms in loading time but you've resolved.

Bye.


PS:
I've reproduced the problem also on IE7.
It appears in all the pages that you can scroll down, before the solution above try add some overflow:hidden; in the coloumns css. Maybe it's just a matter of clearing the floats.

[brianwilson71]

Thanks a lot for your suggestions. I will give both your ideas a go when I get home and post back to let you know how I got on. Thanks again!

/Brian

[brianwilson71]

Update: Its nothing to do with the image or the size of the image so we can rule that out. The image was 1 pixel in height. I changed that to 300 pixels in height but the problem still occurred.

Will keep lookin'

/Brian

[Ryan Fait]

Try adding position: relative; to the div(s) in question. Strangely, that fixes a lot of stupid quirks.

[brianwilson71]

Found it! For some reason (can't remember why) I had a non-semantic <span> inserted. It was this that was causing the grey stripe to appear.

My markup looked like this:

Code: Select all

          <ul id="navMdl"><span></span>
           <li id="t-index">
             <a href="index.html">
             <span></span>home</a>
           </li>
           <li id="t-about">
             <a href="about.html">
             <span></span>about</a>
           </li>
           <li id="t-services">
             <a href="services.html">
             <span></span>services</a>
           </li>
           <li id="t-questions">
             <a href="questions.html">
             <span></span>questions</a>
           </li>
           <li id="t-contact">
             <a href="contact.html">
             <span></span>contact</a>
           </li> 
         </ul>

I removed the <span> and that sorted it!

/Brian

[Ryan Fait]

Um. Why was it there in the first place? Very few things should be between anchors. An image are the only thing that comes to mind at the moment.

[karinne]

W3C's validator probably would have caught that Hence the reason why so important to validate your site

[Ryan Fait]

Does the validator hiccup at that? I'm too used to doing things my normal way.

[karinne]

Yep ... it does. Try it out. Enter this code

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
</head>

<body>
<ul id="navMdl"><span></span>
           <li id="t-index">
             <a href="index.html">
             <span></span>home</a>
           </li>
           <li id="t-about">
             <a href="about.html">
             <span></span>about</a>
           </li>
           <li id="t-services">
             <a href="services.html">
             <span></span>services</a>
           </li>
           <li id="t-questions">
             <a href="questions.html">
             <span></span>questions</a>
           </li>
           <li id="t-contact">
             <a href="contact.html">
             <span></span>contact</a>
           </li> 
         </ul>
</body>
</html>

which was the code provided above and put in the textbox or save it as .html and upload it. First error that comes up ... you guessed it ...

1. Error Line 12 column 21: document type does not allow element "span" here; assuming missing "li" start-tag.<ul id="navMdl"><span></span> ✉

[Ryan Fait]

I feel at one with semantics. Patience young Skywalker.

[brianwilson71]

Lol - you are right of course. I wish I could offer some explanation as to why I put that in there. I left the code for quite a while (several months) and have forgotten the reason. I know that in the past I have used non-semantic spans in order to attach an extra backgound image (as only one background image is allowed per element) and I have also used non-semantic spans for image replacement. However, in this context it just seems wrong and it shouldn't be there. I should have validated first.

[Ryan Fait]

Yeah, validating is always a good idea If you need those spans for something, they will be fine around the anchor.