background not showing in mozilla 1

[kelly5518]

Hi,

I have a couple of css questions:

1. I have the following code for my navigation, but the background image (a small fixed arrow) isn't showing on hover in Netscape or Firefox, but is fine in IE. Here's the code:

td.nav a:hover {background-color: #224270; color: #E8E8DA; background-image: url('images/backgrounds/arrow.gif'); background-position: 0 50%; background-attachment: fixed; background-repeat: no-repeat}

2. The other problem I'm having is a different navigation area (a dropdown menu). On hover it's supposed to display a 5px contrasting border on the right side, but in IE it displays it by extending the width of the dropdown, and in Mozilla it displays the border "outside" of the dropdown menu. Here's the code I'm using:

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 6px;
border-bottom: 1px solid #E4CFA2;
color: #E4CFA2;
padding: 1px 0;
}

#dropmenudiv a:hover{ 
background-color: #600000;
border-right: 5px solid #E4CFA2;
}

Thanks for any suggestions.

 

[BillyRayPreachersSon]

Try making your anchor elements "display:block" and giving them a width and height (don't forget to specify the units for these!).

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[kelly5518]

Hi,

Thanks, but still doing the same thing. The first one is still not displaying the background image in Mozilla, and the second one is still displaying the border outside of the menu in Mozilla and expanding the width of the menu in IE on hover, even though I've set widths, heights and display: block.

Any other ideas?

Thanks,

kelly

 

[kelly5518]

Here's the entire code for the first one: (maybe there's something else in there that's causing a problem.)

td.nav {background-color: #2D5787; border-bottom: 1px solid gray; width: 200px; height: 20px}
td.nav a:link {display: block; width: 200px; text-indent: 20px; height: 20px; color: #E8E8DA; font-weight: bold; text-decoration: none; width: 200px}
td.nav a:visited {display: block; text-indent: 20px; height: 20px; color: #E8E8DA; font-weight: bold; text-decoration: none}
td.nav a:hover {display: block; width: 200px; background-color: #224270; color: #E8E8DA; height: 20px; font-weight: bold; background-image: url('arrow.gif'); background-position: 0 50%; background-attachment: fixed; background-repeat: no-repeat; text-decoration: none; text-indent: 20px}

Here's the entire css for the navigation on the second one (include the div that contains the links.)

<!--
#dropmenudiv{display: block; width: 250px;
border-left:1px solid #E4CFA2; border-right:1px solid #E4CFA2; border-top:1px solid #E4CFA2; border-bottom:0px solid #E4CFA2; position:absolute;
background-color: #700000;
line-height:18px;
z-index:100; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:Verdana, helvetica, sans-serif;
}

#dropmenudiv a{
width: 250px;
height: 20px;
display: block;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
text-indent: 6px;
border-bottom: 1px solid #E4CFA2;
color: #E4CFA2;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
display: block; 
width: 250px;
height: 20px; 
color: #E4CFA2;
background-color: #600000;
border-right: 5px solid #E4CFA2;
}

Thanks for any suggestions.

 

[Vragabond]

Your problem with the background is background-attachment: fixed;. While not even necessary, according to the standards, that command fixes the background on viewport, or screen. So your background is somewhere at the top of the screen in the center. IE ignores this standard and still renders the background according to the element.

As for the second problem, Mozilla is correct again. Your container is 250px wide, your anchors are 250px wide + 5px of added border. Mozilla (FF) behaving correctly renders this by floating anchors over the container. IE being wrong, expands the container to make up for the size increase. Your solution: make anchors smaller when adding border:

#dropmenudiv a:hover { /* put here only things that actually change */
width: 245px;
background-color: #600000;
border-right: 5px solid #E4CFA2;
}

 

[kelly5518]

Hi Vragabond,

The first one solved the problem straight away. I guess I was thinking of html mode where the default is to tile a background.

As for the second one, the magic width seems to be 240px, though I'm not sure why.

Both work great now. Thank you so much!

kelly