[thelist] Site Check -- bg image problem

[M. Seyon]

Message from T-- (6/17/2005 10:36 PM)

>Site displaying as intended in IE6 (PC).
>
>PROBLEM: Firefox having a fit with my (validating!) code. Background image 
>is truncated.  [Tested with Firefox v. 1.0.4 / PC]
>
>http://www.no-pun.com/synergy2005/

Ok, first, your code (XHTML) does *not* validate[1].

On a related but less significant note, while CSS and HTML are 
case-insensitive, XHTML is case-sensitive. And realistically it probably 
doesn't make a difference to you whether you write BODY { } or body { } 
now. But it might in the future. [2]

I think your problem is with the background-attachment: fixed property 
you're using. (Why all the !importants anyway? They're really not necessary 
99% of the time.) If you read the CSS specs [3] you'll see that essentially 
you're incorrectly interpreting how this property works. Firefox is getting 
it right, affixing the image to the viewport and not the element.

To quote the relevant bit, "If a background image is specified, this 
property specifies whether it is fixed with regard to the viewport 
('fixed') or scrolls along with the containing block ('scroll')."

ppk's site quirksmode.org [4] has a discussion of possible workarounds. But 
since you're very aggressively controlling the dimensions of the table 
anyways (width : 730px !important;
height : 400px !important;) I'd say you could just leave off the 
bkg-attachment property altogether as the page shouldn't scroll anyways.

Though I'm not even sure why you're using a table in the first place. You 
don't need it, all your content flows sequentially one box below the next. 
You could quite easily just use a containing div and give it some 
left-padding. That'd go a long way to cleaning up your code.

regards.
-marc

1 - 
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.no-pun.com%2Fsynergy2005%2F
2 - http://www.w3.org/TR/REC-CSS2/syndata.html#q4
3 - http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment
4 - http://www.quirksmode.org/index.html?/css/background.html


--
Trinidad Carnival in all its photographic glory. Playyuhself.com
http://www.playyuhself.com/