Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

    Code:
    /* 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:
    Code:
    <!-- 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.
    Last edited by lpollard; 01-29-2012 at 03:42 PM. Reason: Fixed the issue.. found a snippet of css at the bottom which was in the way.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    #menu {
        color: #FFFFFF;
        height: 25px;
        margin: 48px -20px 0 0;
        position: relative;
        width: 950px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    too skinny ?

    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 ?

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by waxdoc View Post
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •