467,915 Members | 1,586 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

Using hover-images on <A> different on Firefox and IE

Hi all,

I'm using the following code in my website, and it's looking totally
different on IE and Firefox. It actually works on IE while Firefox is
weird.

In CSS:
img.left_nav_1 {background: transparent;}
a.left_nav_1 { background : url(/images/rollovers_01.gif);}
a.left_nav_1:hover {background : url(/images/rollovers_01-over.gif);}

And in Code:
<a href="/test.cfm" class="left_nav_1">
<img class="left_nav_1" src="/images/Rollovers_trans.gif"
border="0"/></a>

To see this in action check out --
http://tinyurl.com/9v9of in both Firefox and IE.

In Firefox it's like the image is moved down 50%.

Ideas ??? We're already using OnMouseOver javascript tags for our
slide-out menus, so I can't use this with a hoverover script with
javascript... unless someone knows how to do two OnMouseOver commands
within a single anchor tag. I did try this, and both IE and Firefox
only execute the first onMouseOver and ignore the rest.

Suggestions ???

Thanks.

Sam

Jul 21 '05 #1
  • viewed: 5039
Share:
3 Replies
Els
Alex wrote:
Hi all,
Hello
http://tinyurl.com/9v9of in both Firefox and IE. In Firefox it's like the image is moved down 50%. Suggestions ???
You should set the background images on the image, not on the <a>
element. The <a> element is only one letter high.

IE does it wrong btw, because your doctype (or rather, the lack of a
doctype declartion) throws IE into quirksmode.

So, instead of
a.left_nav_1 {
background : url(/images/rollovers_01.gif);
}
a.left_nav_1:hover {
background : url(/images/rollovers_01-over.gif);
}
you write
a.left_nav_1 img {
background : url(/images/rollovers_01.gif);
}
a.left_nav_1:hover img {
background : url(/images/rollovers_01-over.gif);
}
Thanks.


You're welcome :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Carly Simon - You're So Vain
Jul 21 '05 #2
Hi Els,

That did fix it on Firefox -- thanks :) But I'm now testing it on
Safari on OSX and with the added 'img' text to the CSS it's still doing
what Firefox was doing... only showing half the image.

If it's working on Firefox and IE I can write some logic code to show
static buttons for these users, but it'd be nice for the hover-overs to
work on Safari too.

Thanks again for your input --

Sam

Jul 21 '05 #3
Els
Alex wrote:
Hi Els,

That did fix it on Firefox -- thanks :) But I'm now testing it on
Safari on OSX and with the added 'img' text to the CSS it's still doing
what Firefox was doing... only showing half the image.
Okay, I don't have a Mac, so I can't test this, but another option is
to set display:block; to the <a> element, and define it's width and
height. Also, the border of the image may get in the way, so better to
take the border off the image, and put in on the <a> instead.

CSS would become like this:

a.left_nav_1{
display:block;
height:40px;
width:139px;
border:1px solid blue;
}
a.left_nav_1 img{
border:none;
}
a.left_nav_1{
background-image:url(Hillcrest-rollovers_01.gif);
}
a.left_nav_1:hover{
background-image:url(Hillcrest-rollovers_01-over.gif);
}
If it's working on Firefox and IE I can write some logic code to show
static buttons for these users, but it'd be nice for the hover-overs to
work on Safari too.


Of course :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: The Eagles - Heartache Tonight
Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by troloo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.