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]

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!