Resolved Hover over text links works in IE, but not in other browsers.

[lpollard]

Hi,

On a site i'm currently updating I have a text button on which it has a coloured bottom-border and then a background when hovered; in IE i can hover over any part of the button whether its the text or the area where the background is on the hover and it will recognise it as a button, however in firefox, opera, chrome & safari you can only hover on the bottom border but not the button for it to recognise the button.

I'm currently completely updating the design & content of the site, but to give you a round idea of what i meant; it's the colour buttons at the top of the site. http://aalproductions.co.uk/

Here is the current CSS that i have for this if it helps or if anyone has any suggestions to improve this:

/* Menu */
#menu, #menu a{color:#FFF;font-size:13px;width:100px;text-decoration:none;border-radius:5px 5px 0 0;padding:4px 10px 5px 10px;margin:0 -5px 0 0;display:block-inline;}
a.m1:hover{background:#009fda;}a.m1{border-bottom:#009fda thick solid;}
a.m2:hover{background:#8ebae5;}a.m2{border-bottom:#8ebae5 thick solid;}
a.m3:hover{background:#be2828;}a.m3{border-bottom:#be2828 thick solid;}
a.m4:hover{background:#ffa02f;}a.m4{border-bottom:#ffa02f thick solid;}
a.m5:hover{background:#f6d65b;}a.m5{border-bottom:#f6d65b thick solid;}
a.m6:hover{background:#69be28;}a.m6{border-bottom:#69be28 thick solid;}

and html:

<!-- Menu -->
<div id="menu" align="left">
    <a class="m1" href="/">Home</a>
    <a class="m2" href="/hire">Equipment Hire</a>
    <a class="m3" href="/services">Services</a>
    <a class="m4" href="/about">About Us</a>
    <a class="m5" href="/productions">Productions</a>
    <a class="m6" href="/contact">Contact</a>
</div>

Thanks, Luke.

[Excavator]

Hello lpollard,
That's a bit of a mess you have going on there. I don't think positioning is working the way you expect it to.

Learn more about positioning here.

See what this change does for your menu -

#menu {
    color: #FFFFFF;
    height: 25px;
    margin: 48px -20px 0 0;
    position: relative;
    width: 950px;
}

[waxdoc]

Looking at site on MAC, the only HOVER is on the thin border below the tab/text, which makes it difficult to activate.

Couldn't the text itself be encompassed in a:hover {} link ?

[lpollard]

Originally Posted by waxdoc

Looking at site on MAC, the only HOVER is on the thin border below the tab/text, which makes it difficult to activate.

Couldn't the text itself be encompassed in a:hover {} link ?

That's my exact problem i was trying to describe earlier.. you put it in an easier way to understand. It is an a:hover; but like you say the border is the only place it activates. Which i really need to fix, but i'm unsure how.

P.S thanks Excavator for that; i've just changed the site to the new css which you suggested