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.

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 (http://www.barelyfitz.com/screencast/html-training/css/positioning/).

See what this change does for your menu - #menu {
color: #FFFFFF;
height: 25px;
margin: 48px -20px 0 0;
position: relative;
width: 950px;
}

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 ?

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 :thumbsup: