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

brianwilson71 · #1 Apr 23rd, 2007, 11:19

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 · #2 Apr 23rd, 2007, 11:28

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

brianwilson71 · #3 Apr 23rd, 2007, 12:41

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

/Brian

karinne · #4 Apr 23rd, 2007, 13:18

I don't see a problem in IE6

brianwilson71 · #5 Apr 23rd, 2007, 13:38

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 · #6 Apr 23rd, 2007, 13:40

Nope ... don't see any problem.

Gwayn · #7 Apr 23rd, 2007, 13:51

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 · #8 Apr 23rd, 2007, 14:46

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 · #9 Apr 24th, 2007, 08:06

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 · #10 Apr 24th, 2007, 09:40

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

brianwilson71 · #11 Apr 24th, 2007, 11:35

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 · #12 Apr 24th, 2007, 13:48

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 · #13 Apr 24th, 2007, 13:54

W3C's validator probably would have caught that

Hence the reason why so important to validate your site

Ryan Fait · #14 Apr 24th, 2007, 13:57

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

karinne · #15 Apr 24th, 2007, 14:05

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 ...

Quote:

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 · #16 Apr 24th, 2007, 15:35

I feel at one with semantics. Patience young Skywalker.

brianwilson71 · #17 Apr 24th, 2007, 15:59

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.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Faux Columns Problem - scolling up / down causes part of background image 2 disappear