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.

[jest]

Hmmm...IE now shows the repeating image, but the top image no longer appears in any browser. :(

[jest]

I tried

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

without #header and the image displayed fine. It's only the combination that won't display.

[branchandroot]

*goes to look at the html* Ah. That would be because this style does not have a .inner div for #header. You could use .header-left instead, it looks like. You'd have to tell it width: 100%; height: 100%, because right now it's a little bitty box up on the top left, but that should work if you're not using that box for anything else.

[jest]

Thanks so much for your help. I'm afraid it still doesn't work.

If I understand right, the .header-left part has to be the repeating image (because the main image needs to be no-repeat and placed in the center). As soon as I put the .header-left width to 100%, the main image disappers because .header-left thinks it should be on top and cover everything else. Any ideas about how I can get the main image to go on top?

Is it possible to reposition the .header-left to the center and make it the no-repeat image?

[branchandroot]

Yes, do that, top image in .header-left is how it should be! #header has to have the repeating image, because that has to be behind the main image. .header-left should have the main image, and sit on top, but first you have to tell .header-left to be the same size as #header, to fill up that space all the way. Otherwise, your top image won't be centered properly. This is probably counterintuitive, looking at the html, but the further down in the html code a container is the further "up" in the visible stack it is. So .header-left gets the top image.

IT WORKS!

[jest]

You are an absolute star! I'm so pleased. Fixing this up for IE has been haunting the bottom of my to-do list since August.

*happy dance*

Thank you!

Re: IT WORKS!

[branchandroot]

My pleasure!