Help switching background images using CSS

[letsgetsilly]

I thought that I had this problem corrected, but unfortunately today it has resurfaced! I don't understand what it is and how to get around it.

I am attempting to switch background images using CSS. The procedure works fine in Internet Explorer, but I am unable to see anything in Firefox. However, the links are still present, as my mouse can hover over them and the pointer will change.

When I place a background image inside the <div> within the style sheet, it will appear correctly. However, I am unable to get this to work when dealing with changing images on :hover, etc.

Attached is my current code from CSS:
a.menu {
clear: left;
border: 0px;
display: block;
z-index: 103;
width: 150px;
height: 40px;
direction: ltr;
top:0;
left:0;
/**outline:none;**/
background-attachment: fixed;
background-repeat: no-repeat;


}

a.menu.Home{background-image:url(../Images/navHome.jpg);}



Here is my HTML code

<div id="divHome" class="navMenu Home" style="Z-INDEX: 103">
<a class="menu Home" href="Index.aspx"></a>
</div>


Any help will be greatly appreciated, I've spent my entire morning on this problem with no luck. Thanks again.

 

[letsgetsilly]

I'm using "../images/home.jpg" from my CSS page which is located in localhost/styles/menu.css.

My images are localhost/images/...

When I highlight the area, it changes the mouse like a hyperlink, so the hyperlink area is working. The image, however, does not show up.

 

[skrilla]

Does this work?

 

[imported_LoKe]

Originally posted by: skrilla
Does this work?

:thumbsup:

 

[letsgetsilly]

That did it for me, thank you

 

[letsgetsilly]

Need help again! 🙁 Please read top post

 

[FrustratedUser]

I had som eproblems using hover and visited using IE. Turned out the be the order in the css file I used that caused glitching. Moved hover before visited (or the other way around) and that solved it. Not sure if this is relevant to your new problem.

 

[letsgetsilly]

Interesting. I will try moving the commands around. I do have 2 style sheets included here, so maybe that has something to do with it.

The strange thing is that I.E. is the one that works which is pretty backwards. Thanks for the heads-up.

 

[letsgetsilly]

I am currently able to display images in both IE and FF but unable to do so without having text inbetween my <a>anchors</a>. How can I create a hyperlink with just a background image?

 

[letsgetsilly]

I was able to fix it by removing the background-image:fixed and no-tile attributes

 

[skrilla]

When I put your code you gave in an html doc, I am seeing the image without putting any text between the anchors. It works in IE and FF.

I'm not sure if you are having trouble with seeing the image or getting the hover to work now. Because there is no :hover in the code you posted. But I can see the image fine.

 

[letsgetsilly]

Thanks for going through all that trouble. I think this might be a bug in visual studio 2003, that is what I'm coding in. After Ive got it working, I can put in the fixed and no-tile attributes (to the background-image) and it will work properly. Very strange.

I have another question that I will throw out for anyone who has ideas: I have 3 states for each button: standard, rollover, and selected. I've got the first 2, and for the selected state I simply am using a static image on that particular .aspx/.html page. On my default landing page (index.aspx) I would like the selected state to appear only after the user has clicked the "home" button. So, in otherwords, the viewer can load up the homepage and see all the menu items, then after selecting 'home' the same page will load, except the home link will now be in the 'selected' state until the user moves on. Any suggestions?