Jump to content
inactive

IE8 background image hover bug

Recommended Posts

Hey guys,

I may have found a new bug in IE8, googled around a bit but can't find anything close...maybe someone here knows whats going on?

 

Anyway, basically just a div with background colour, and inside sits a block displayed link, transparent in its normal state, but with a background image when hovered over.

 

Test case at http://esquimaux.com.au/ie8bgtest/test.html

 

So the HTML is like this (bare in mind the actual case is valid XHTML 1.1):

<body>

	<div id="outer">
		<a href="#" id="inner">test</a>
	</div>

</body>

 

And the CSS as follows:

div#outer { width: 100px; height: 100px; background-color: #00FF00; }
a#inner { display: block; width: 100px; height: 100px; background: transparent; }
a#inner:hover { background: transparent url(testbg.png); }

 

So its meant to just be a green square with the test link in it, and as you hover over it the backgroun image kicks in and the sits over the whole div, so the whole square goes blue (as thats the colour of the bg image).

 

Works great in all good browsers, even IE6 and 7, but not IE8 (curiously though it does work in IE8 compatibility mode).

 

In IE8 the bg image doesnt show. Any other hover css will work (changing link colour etc). Also, it will work if the initial link css doesnt have background: transparent set, but i need that tag for the site im working on.

 

So it seems the IE8 can't overide the background: transparent on hover state.

 

Any ideas?

Share this post


Link to post
Share on other sites

I would recommend uploading this bug to Positioniseverything.net and browse their site also looking for this bug. They specialize in this stuff

Share this post


Link to post
Share on other sites

Cheers.

 

Righto well had a quick squiz on PIE and can't find anything close....though probably someone out there on the wibble has found this one before.

 

I'll keep looking, but any further tips would be great.

Share this post


Link to post
Share on other sites

Since IE8 is new you can probably take this chance to upload the bug to their site

Share this post


Link to post
Share on other sites

Well as I have not ever discovered a bug I wouldn't know. I know theres a contact email at the bottom of the page so they probably just mean that

Share this post


Link to post
Share on other sites

Yeah I've heard that there was another background bug in the beta which has been marked as fixed in the upcoming public release, so hopefully this one is too.

Share this post


Link to post
Share on other sites

If  you ever come across an IE8 bug known as the black box bug ask me about it, I fixed that bug :D

Share this post


Link to post
Share on other sites

Well yea its still a beta and I think that in the amount of time its been out they have found more bugs with it then all the "open source oopsies" combined.

Share this post


Link to post
Share on other sites

As long as those are fixed before the program is released i wouldn't care about the amount of bugs in any software.

 

I used to test my sites in IE8 Beta as well, and i generally found that they worked the same as in IE7, i even tested out the new webslices. I can only say that IE has improved a lot, it would however still need to add some functionality, such as the possibility for its users to change default hotkeys, I.e. Usability issue: backspace key

 

 

If you are validating your code and testing new features in IE, then it wouldn't take long for you to notice how the hslice class was referenced to have an ID like "1", that would generate validation errors since ids ain't allowed to begin with a number. As far as i know, it doesn't however make much a difference to name the hslice "item-1" or similar, (which is allowed). So some stuff are really easily solved.

 

You may want to check out Report a Webpage Problem Internet Explorer 8.0 Beta Add-On

Share this post


Link to post
Share on other sites

Easy way to solve this problem:

 

use

a#inner:hover {
    background: transparent url(testbg.png); 
    
    position: relative;
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.