Rollover never works

[gimpguy2000]

Hi all, I'm new here obviously and a bit new to CSS, making the transform over from HTML. Now, I have almost completed my first page of my hopefully soon, new site, the problem is, I cannot get a rollover to work.

What I have tried:
Every link on the internet of different code,
I tried single images, double images, single images with double button for quick rollover.
I have had many help with this which is appreciated, however, I simply get directed to more code that won't work. Or at least, not for me. I am no expert in CSS, or even close.

CSS

 .E 
 {display:block;
  position:absolute;
  left:431px;
  top:141px;
 
 }
 a .E {
  width:312px;
  height:41px;
  display:block;
  background: url(gimpimages/downtab.png) 0px 0px no-repeat;
  
 }
a .E:hover {
  background-position: 157px 41px; 

HTML

<a href="Downloads.html"><img class="E" src="gimpimages/downtab.png" width="312" height="41" " border="none" alt="Downloadstab"></a>

This is where I'm at now after trying everything under the sun. The button image is a single image, the downtab.png, made of two buttons but one single image now. I have the separate images as well and tried them but nothing.

Thank you kindly,

Paul

[MarkFilipak]

Hi Paul and welcome to WebmasterWorld.

1 - Try
background: url("gimpimages/downtab.png") 0px 0px no-repeat;
(note quotes).

2 - There is no difference between this
.E
and this
a .E
They are the same element and the style declarations could be combined.

3 - Since you have 312px and 41px in the CSS, there's no need for width='312' and height='41' in the HTML.

So it appears that the key thing is that the rollover moves the background from 0,0 to 157,41.
But Paul, you have a foreground image too!

Try this, Paul

*.E{display:block; position:absolute; left:431px; top:141px; width:312px; height:41px; background:url('gimpimages/downtab.png') 0px 0px no-repeat}
*.E:hover{background-position:157px 41px}

<a class="E" href="Downloads.html" alt="Downloadstab"></a>

This turns the a-element into a block. That's permissible. Then it moves the background-image on rollover.

I ran this with an image I had laying around and the image just disappears. What is it that you are trying to achieve? If I knew more I could help.

[edited by: SuzyUK at 10:47 am (utc) on Mar. 13, 2008]
[edit reason] minimised sidescroll [/edit]

[swa66]

Also if you put the :hover on the image I'm not sure IE6 (just to name one version of IE) will properly do it.
Rule to have less trouble with IE: put the hover on an <a> tag.

If I want to add hover effects on a child of a <a>, to help IE along I'd write it as:

X a:hover Y {...}

With the X optional of course.

[MarkFilipak]

> if you put the :hover on the image I'm not sure IE6...
Yow! I forgot about that. You can't img:hover in IE6. Good work swa66!
That's even more reason to do this:

<a class="E" href="Downloads.html" alt="Downloadstab"></a>

[gimpguy2000]

Thank you for the replies and I apologize for my late one, the flu is hitting unfortunately.

So far, this has been explained, even to someone like me, in a way I finally am understanding, so thank you.

What I have tried to accomplish and I think now more than ever, I should decide on one way or perhaps ask what is the best way, is this..

Obviously a rollover but my current rollover image is 312 wide, it has the left and right side but is ONE single image. So what it would do instead of loading another button image, is to switch showing the position of the image, eg.. -156 .

Of course I have no issues with using two images either, I do graphic work for sites and software companies so to make any buttons that WOULD work, not a problem if that would be a better way to go.

I will try what has been stated so far and hopefully it shows some signs of working for me ;)

Thanks very much,

Paul

[gimpguy2000]

Ok, an update. Well, unfortunately, I haven't gotten anywhere. Trying numerous methods with the above help my three outcomes are this...

It moves my Faqs tab no matter what so this is a constant along with..
would make downloads tab disappear when hovered
downloads tab does nothing at all

I still have no clue why it's giving me so much grief. Is it possible there is something else wrong in my page? I have had numerous people look at it prior and say all looks well but then again, how well did they look, if you know what I mean.

Thank you very much

Paul

[MarkFilipak]

> I still have no clue why it's giving me so much grief.

Please take the time to develop some terse examples that illustrate each problem and then post the code here. That code will give us something to work with. I guarantee that the time spent writing terse examples will be time well spent. Cut your code down to the minimal code that still exhibits bad behavior.