Driving me nuts! (does this count as a heading?)

HTML & CSS
1

hi. i am trying to style a page background with a three color gradient from left to right (the <body> tag). i have working code for mozilla and gecko based browsers but have found that there is no 3 color gradient for IE. so i am trying to incorporate a hack that will show a background image for that version, but it is not displaying. here is what i have:

body {
	font-family:'lucida grande', verdana, sans-serif;


background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, rgb(220,221,222)),
    color-stop(0.1, rgb(255,255,255)),
    color-stop(0.9, rgb(255,255,255)),
    color-stop(1, rgb(220,221,222))
);
background: -moz-linear-gradient(
    left center,
    rgb(220,221,222) 0%,
    rgb(255,255,255) 10%,
    rgb(255,255,255) 90%,
    rgb(220,221,222) 100%
);
height:auto;
	}
*:first-child+html [body] { background:url(../images/test.gif); background-repeat: repeat-y; background-position: top center; }
* html [body] { background:url(../images/test.gif); background-repeat: repeat-y; background-position: top center; }
2

did you mean:


*:first-child+html  body  { background:url(../images/test.gif); background-repeat: repeat-y; background-position: top center; }
* html  body  { background:url(../images/test.gif); background-repeat: repeat-y; background-position: top center; }

?

cause the brackets (“”) will make EVERY browser ignore the rule ( this includes IE)

3

thanks for replying. i tried removing the as in your post and still nothing, just a plain white background. the gradient background shows up no problem in firefox, safari, etc. but no dice in explorer (i am testing in ie6 but ideally would like the background image workaround to apply to all ie)…?

4

the "holy hack SHOULD work. but honestly the best way to hack for IE is conditional comments anyway. They are nearly bullet proof and you can even specify which versions of I you want to target, as Redmont likes to give each version of IE a set of bugs that is different than before. Don’t you love MS?

Condition comments…


<!--[if IE 6]>
Special CSS for IE 6 here
<![endif]-->

since we are targeting ALL IE… it is as easy as this:


<!--[if IE]>
 body  { background:url(../images/test.gif); background-repeat: repeat-y; background-position: top center; }
body  { background:url(../images/test.gif); background-repeat: repeat-y; background-position: top center; }
<![endif]-->

note you no longer need the hack code either as the conditional statement does the targeting for us.

BTW… another thing that MAY be casing your BG to show up default (white) is that your image may be in the wrong directory.
To test this assumption use this:


*:first-child+html [body] { background:url(../images/test.gif); background-repeat: repeat-y pink; background-position: top center; }
* html [body] { background:url(../images/test.gif); background-repeat: repeat-y pink; background-position: top center; }

if the BG is PINK in IE, then IE IS, in fact, reading your rule but it is not finding your image…