Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Please Help; IE Browser Compatibility Issue Re: Please Help; IE Browser Compatibility Issue

#99527

Hi Senff, I really appreciate the help. I have actually tried incorporating the active state. But, the same issue exists in IE. Again, it works absolutely fine in Firefox. Sorry, the doctype is declared–good catch. I just accidentally truncated it. I doulble checked and that’s the only code missing in my posting.

I found a litte info online and tried it but it didn’t work either. The problem still persists.

Here’s what I found online:
Disappearing background imagesIE has a very freaky bug where it likes to make background images (and sometimes even text – particularly if there are floated elements around) disappear. This often happens when you scroll up and down on a web page and you can usually make the background re-appear by refreshing the page.

Obviously you won’t want your site visitors to have to refresh a page to see a background image in full! A freaky solution to this freaky problem is to insert the CSS command, position: relative into the CSS rule containing the background image:

.foo {
background: url(filename.jpg);
position: relative
}

Occasionally this won’t work, so another solution is to assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer. Because IE interprets height as min-height (see point 2 above) this CSS rule won’t affect the appearance:

.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}

The height: 1% CSS command is cancelled out by the height: auto CSS command. Internet Explorer doesn’t understand html>body, so by inserting this in front of the second CSS rule this whole CSS rule is ignored by IE.