Hover image

[mitcho]

hey guys

weird problem, don't know if its worth anyones time solving. but using css i put this little rollover icon at the bottom of this page www.benigntech.com.au

now in Firefox it works fine. But in IE(6), if you rollover it then rolloff from the bottom, it stays rolled over. if you rolloff any other direction except down it works fine?

weird huh?

[Jen]

Why are you still using IE6? IE7 is out stable. IE6 isn't. You should consider upgrade IE7. Both IE 6/7 are different, I simply ignoring IE6 for bugs and fix the bugs in IE7.

[ericcarroll]

Unfortunately, according to W3School's stats (http://www.w3schools.com/browsers/browsers_stats.asp), IE6 still has most of the market share so it's still worth fixing those bugs. I would recommend upgrading to IE7 and install a standalone version of IE6. I use Tredsoft's Multiple IE installer (http://tredosoft.com/Multiple_IE).

mitcho, I haven't used a blank image that way before, but I would recommend removing the blank image inside your <a> and just use your background images on that <a>.

So do something more like this:
a#mpage {
display: block;
float: left;
background: url(../images/mplogooff.gif) top left no-repeat;
width: 22px;
height: 15px;
border:none;
margin-bottom:-3px;
}
a#mpage:hover {
float: left;
display: block;
background: url(../images/mplogoover.gif) top left no-repeat;
width: 22px;
height: 15px;
border:none;
margin-bottom:-3px;
}

Let me know how that works.

[mitcho]

I tested your code out on another site i am making with the same footer rollover

you can see this here: www.mitchellpage.com.au/temp/myc

now although this works perfectly, how can i get the image back on the previous line inline with the text like it is on this site: www.benigntech.com.au

Many thanks for your help, it is much appreciated!

[ericcarroll]

What happens when you put the "float: left; in there? (I'm not where I can duplicate your code setup for testing, at the moment).

[mitcho]

If i put your code in exactly as you put it (including the float left), the logo is on a new line all the way to the left of the container (in both fire fox and IE).

You can see this here: http://www.mitchellpage.com.au/temp/myc/

?

[mitcho]

Ok i changed the CSS abit. I added Position:absolute; and change margin-bottom to margin-top:-3px;

a#mpage {
position:absolute;
display: block;
float: left;
background: url(../images/mplogooff.gif) top left no-repeat;
width: 22px;
height: 15px;
border:none;
margin-top:-3px;
}
a#mpage:hover {
float: left;
display: block;
background: url(../images/mplogoover.gif) top left no-repeat;
width: 22px;
height: 15px;
border:none;
margin-top:-3px;
}

This works great in IE6, but in Firefox it doesnt work?

[mitcho]

also, could you tell me why the margin-top:10px; i have added to the footer works in IE and not in Firefox? Thanks