Home › Forums › CSS › Please Help; IE Browser Compatibility Issue › Re: Please Help; IE Browser Compatibility Issue
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.