PDA

View Full Version : background-color only filling the page sometimes



lawrie
Mar 28th, 2007, 05:56 PM
hey all,

i don't think i've had this problem before; i've just been mocking up a very simple site design offline, but the first thing i noticed when i tried it on a server was that, in IE, the background-color only goes as far as the bottom of the last DIV. refresh it, and it usually fixes itself. the css is here:

http://www.gaijindesign.f2s.com/intro/intro.css

i can't get the problem to happen in firefox or opera, but it really is driving me a little bit nuts :/

any help would be greatly appreciated!

Excavator
Mar 28th, 2007, 06:12 PM
Good morning lawrie,
Hard to say from just the CSS. It looks like you've put a color on html, body and that should work fine.
What doctype are you using? Do you have a link where we can see this happening?

lawrie
Mar 28th, 2007, 06:36 PM
the link is:

http://www.gaijindesign.f2s.com/intro/

and like i said, it only appears to be happening in IE (as per usual).

it's only a stupid cosmetic thing, but i get totally wound up by things like this, obsessing over them until they're fixed :rolleyes:

karinne
Mar 28th, 2007, 06:59 PM
I'm not sure I follow the problem ... on what version of IE does this happen?

But one thing I would suggest is getting right of the grey div that's basically just adding a grey "border" to #column. So ... instead add


#column {
background-color:#EEEAE4;
margin-left:auto;
margin-right:auto;
text-align:center;
width:800px;
border: solid #BABABA;
border-width:0 4px 4px;
}

lawrie
Mar 28th, 2007, 07:13 PM
i'm using IE7 (7.0.5730.11, to be precise)

so... does nobody else see this? because it's happening pretty consistently for me :/

karinne
Mar 28th, 2007, 07:23 PM
Sine I don't have IE7 here ... no ;)

lawrie
Mar 28th, 2007, 07:30 PM
if it's only happening for a minority, then i say screw it. only two or three people will ever be looking at this anyway. it will stay at the back of my mind forevermore, though ;)

i made the css change to get ride of the #grey - *smacks forehead* that's a much neater solution. thankyou!

karinne
Mar 28th, 2007, 07:35 PM
haha ... no problem ;)

lawrie
Apr 3rd, 2007, 02:45 PM
just an update to the problem i was suffering:

as far as i can figure out there was no problem with the css; i was just playing around with it and noticed that when i minimised the window and then maximised it again, the unfilled background area of the page would be filled with the background colour. i did a couple of tests and even if i placed a window only partially over the uncoloured area, then moved it away, the area that had been covered by the window now had colour. i'm figuring this is just some major display bug with IE, since this doesn't happen in any other browser?

Excavator
Apr 3rd, 2007, 04:12 PM
Goodmorning lawrie,
I checked your test link and it's I see it happening here, this is a Vista box with IE7. FF2 doesn't do it.
The only thing I can suggest, without downloading and testing your site locally, is this:
html {
background-color: #C9C9C9;
}
body {
background-color: #C9C9C9;
font-family: Trebuchet MS;
font-size: 14px;
color: #202020;
margin: 0px;
text-align: center;
}


it's only a stupid cosmetic thing, but i get totally wound up by things like this, obsessing over them until they're fixed hehe, me too. I can totally sympathize.

the_scyphe
Apr 3rd, 2007, 04:26 PM
I think you should remove the html there...it's an inline element.


body,html {
background-color: #C9C9C9;
font-family: Trebuchet MS;
font-size: 14px;
color: #202020;
margin: 0px;
text-align: center;
}


remove the one in the red text.

lawrie
Apr 3rd, 2007, 10:44 PM
hey guys - thanks for the replies. i've tried both methods and i'm still getting the same thing, although with the same quirk - i minimise the window or cover it up, and then maximise/uncover it again and the grey background is back in place.

excavator, did you try minimising/maximising thing with your IE7? here's the link to the page:

http://www.gaijindesign.f2s.com/intro/

thanks for your suggestions!

jlhaslip
Apr 3rd, 2007, 10:56 PM
If it corrects itself on a refresh, try a body onload event handler to perform the refresh?
The javascript folks might be able to provide one if you need the code.

koyama
Apr 4th, 2007, 03:24 AM
in IE, the background-color only goes as far as the bottom of the last DIV. refresh it, and it usually fixes itself
Strange things may occur in IE when you use imported style sheets.

Related to your problem is what is known as Flash of Unstyled Content (FOUC) (http://www.bluerobot.com/web/css/fouc.asp/) still occuring in IE7. Here you may see an unstyled version of your page before the imported style sheet arrives. This is contrary to what happens when you insert a linked style sheet via the link element. The article describes certain fixes if one absoultely must use an imported style sheet.

I haven't been able to find your bug described anywhere, but your example shows that the final rendering of the page in IE may be wrong when you use an imported style sheet. IE apparently only updates a portion of the page around the body element when the imported style sheet arrives. This must be considered a bug and not just a peculiar phenomenon.

For fun you may try to add this and you will clearly see the FOUC:


<body bgcolor="green">
...
</body>

Best solution to your problem is probably to use a linked style sheet.

lawrie
Apr 4th, 2007, 04:27 PM
well i never - it was totally down to FOUC. i knew of the phenomenon, and had occasionally witnessed it, but never knew that it could produce this kind of bug. i've scrapped @import and i'm now using a link rel.

thanks, koyama!