IE 7 steals my background image

[lisa99]

I have been scratching my head for quite a while on this one. I don't even know where to start.

I'm working on a site that uses background background images within divs to create a "rounded corners effect". On one page where all the dynamic data is, IE 7 takes the top left, top center, and top right background images, (none of the others) but only when I scroll past it (when the page loads, everything is fine) - and only when the group of divs has content within it. Before I got content in the other 2 groups of divs I could scroll past them and back up - and everything worked perfectly.

I validated my css:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.instantalertnetwork.com&profile=css21&usermedium=all&warning=1

It has to be an IE 7 (or maybe all versions of IE?) quirk. Everything works great in FireFox...

The css is quite extensive and repetative so if anyone has time to check instantalertnetwork * com the problem appears on the second page after entering a zip code and clicking "Go Local". (Please excuse the mess, it's still under construction.)

(admins/mods - I mean no offense - please remove the reference to my site if it violates terms and conditions or something)

[nrg_alpha]

Well, without combing through all that css, I would as a start suggest validating your actual page, as it currently doesn't (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.instantalertnetwork.com%2Flocalized.php&charset=%28detect+automatically%29&doctype=Inline&group=0). While css validation is great, there is more to it than that. Your main document should also be valid.

I can't say for sure if this will fix the problem at hand or not, but it certainly wouldn't hurt.

[lisa99]

On that page (in it's current stage) I have error reporting turned on and without entering a zip code on the index page, lots of variables aren't set and therefore many errors are thrown. Most of those validation errors are php's errors using the <b> and </b> tags or other things in the errors. When error reporting is turned off, I only get an invalid doc type declaration. (Dreamweaver 8 defaults...what can I say...)

After much googling, I have been playing with allowTransparency:true; (which didn't work) and removing the transparency (which hides my background-image all together) but I am noticing now that sometimes I get a partially transparent image (the border looks much lighter...but it's there sometimes) and sometimes only a few of the images are hidden (occasionally I'm getting the top right corner and some of the top border that repeats over the x axis). However, clicking on any part of the missing background image at any time brings the whole thing into focus correctly. This is really strange.

Thank you very much for your help and I will work on getting the doctype declaration to work. I need some remedial html training, I guess...

Worst case scenario, all those "table" looking things are 1 of 2 sizes, so I'll just create a single image for the top and it's corners and force that to display somehow...

[nrg_alpha]

On that page (in it's current stage) I have error reporting turned on and without entering a zip code on the index page, lots of variables aren't set and therefore many errors are thrown. Most of those validation errors are php's errors using the <b> and </b> tags or other things in the errors. When error reporting is turned off, I only get an invalid doc type declaration.

You must have made some changes since last night, because the errors listed last night were not mostly <b> and <br> tags. I'm now seeing mostly stuff like IDs already being defined (IDs are supposed to be unique - only used once in your document... identical classes can be used in multiple declarations).


Worst case scenario, all those "table" looking things are 1 of 2 sizes, so I'll just create a single image for the top and it's corners and force that to display somehow...

It would be better to do so.. In fact, to reduce memory and http requests you can make a single image that has only the corner pieces and load those via css (think css sprites (http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/)). Then, for the rest of the panel, just use a div with a matching width (and no height declaration) and give it borders that match the border colours of the corners image.

An example of all this can be seen in a small 10k web page (http://olsenportfolio.com/10k.php) I did for a 10k challenge. In say Firefox, just right-click on any of the rounded corners and select 'View background Image'. You'll see that all the corners (as well as all the graphics in this case) are all one (in your case, just put all the corners together into a small image) and apply the same princial using css.