SOLVED: Browser compatibility...

[jest]

So I made a banner for a DW community, The RecCollectors. It seems to display fine in Firefox and Chrome, but no image comes up in IE.

Right now it uses CSS3 to stack the main image on top of a tiled background image (the stripe). I'm happy with how it displays in Firefox and Chrome, but obviously I need to do something for IE. I tried to write an IE conditional comment specifying a slightly modified image that would work as a stand alone, but I can't get it to work in the custom CSS box.

Does anyone have any suggestions about what I should try next? Is there a better way to combine a fixed image and a tiled image in a header?

Thanks for any input.


ETA: Found a potential something in the comments to another post...adding some custom CSS that puts one image in #header and the other in #header .inner ? Anyone know how that might work?

Comments

[branchandroot]

Make the tile the background image of #header and the "top" image the background of #header .inner. This is the old fashioned, less breakable way to layer images, and I for one will be endlessly grateful when IE catches up to the rest of the world and has complete support for CSS3, so we don't have to screw around like this any more. (Of course, then it will just be something else.) Just remember that IE, in particular, tends to lag in support of the CSS standard, no matter what year it is.

What you need is probably

#header { background: ("url/to/tile/image") top left repeat-x; }
#header .inner { background: ("url/to/top/image") bottom center no-repeat; }

Go to Customize Layout and the Custom CSS tab, and paste that in, and see if it works for you.