CSS li Hover different from IE to Firefox

[qwik3r]

http://www.southern-nightlife.com rollover the menu in IE the background image (the gradient pink background image) will fill the entire square in firefox it just is the size of the link, any suggestions? Thanks.

[ray326]

Make sure you've got a display:block on the anchors.

[holyhttp]

The rollover effect looks the same in FF and IE for me. I am using IE7.
Horizontally the box delimited by the vertical grey line is filled with the pink background. Vertically it seems that you set your anchor block height to auto. I suggest you give it the same height as the navigation stip ( I suppose it's greybar)

[qwik3r]

The rollover effect looks the same in FF and IE for me. I am using IE7.
Horizontally the box delimited by the vertical grey line is filled with the pink background. Vertically it seems that you set your anchor block height to auto. I suggest you give it the same height as the navigation stip ( I suppose it's greybar)

Not too sure what you are talking about the height of the pink hover background image is 41px and its on every tag relating to that nav menu.

It works in IE but for me it does not work in FF 2.0 - it hovers the pink but it is not 41px high its only as high as the height of the word. I am not sure where you mean "anchor block height"

[ray326]

The anchors in the menu have the background, right? They need to be display:block to fill their containers.

[holyhttp]

If you would like the rollover effect to expand to a height of 41px, then you need to specify that height in the "mainlevel-nav" class. The rollover class shoul only specify the background image so your navigation will not bounce as it's the case now.

[sticks464]

rollover the menu in IE the background image (the gradient pink background image) will fill the entire square in firefox it just is the size of the link
I looked at this in IE6 and FF2 and their the same.

Your css:
ul#mainlevel-nav li a
{

padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #ffffff;
background: transparent;
height: 41px;
display: inline;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

ul#mainlevel-nav li a:hover
{
color: #fff;
background-image: url(../images/menubg.png);
height: 41px;
width: 72px;
display:block;
}

You have a set width for the hover with auto width for the a link.
Either make the hover width the same size as the link or the link the same size as the hover.

[qwik3r]

I have since fixed it, thanks for the response all. I did not correctly put the width which was making it span 100% in IE 6. Thanks for the tip.

[qwik3r]

I have one more question regarding this, if you guys take a look at FF vs IE again when you hover over the menu in FF the hover image replaces the original fine, however in IE it gets hugh and messed up.

I attribute this to width: auto more than likely however if i give the menu items a width it doesn't look right, is there anyway around this w/o specifying a width?

[holyhttp]

When createing a rollover effect, you can specify all the styles in the link in its original state. Then in the hover class, just the style attribute you want to change. That is, for instance:

ul#mainlevel-nav li a
{
width:auto;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #ffffff;
background: transparent;
height: 41px;
display: inline;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

ul#mainlevel-nav li a:hover
{
background-image: url(../images/menubg.png);
}

Only the background image needs to be changed by the rollover effect. Anything else stays the same. This will prevent your links from moving around.

[qwik3r]

still doesn't work checkout the site in FF the hover only goes to the size of the text , but it does work in IE.

[holyhttp]

Alaways provide an URL so we can see what you mean.

[qwik3r]

the url is at the top of the page on the first post. http://www.southern-nightlife.com/cms/

[holyhttp]

My mistake.

[holyhttp]

The rollover effect is working both in IE and FF. However I am using IE7 and FF 1.5.xx

[qwik3r]

would you mind posting a screen cap of FF for me? This is what i get using firefox 2.0.0.1 (see attached)

[holyhttp]

Did you specify the height of the top anchors?
when you roll the mouse over and mouse cursor does not turn into a hand then the height is the main issue.

[qwik3r]

not sure what you mean by top anchors. Is the screen shot i attached what you see when you are using your version of FF? Because that is not the right effect and yes they do turn into a hand.

[qwik3r]

i forgot to ask you what version of IE you are using? IE6 it screws up if i use display:block however in IE7 and FF it looks right.

[qwik3r]

ttt - still having this problem guys checkout www.southern-nightlife.com/cms/ in ie 6 and in FF2 and notice the difference when hovering over the menu how can i fix this?