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 3 of 3
  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    gradient spanning background on an a:hover

    I seem to have an issue with this one. Not sure why. Errors show in IE 6 & 7, and Safari 3.0. The padding is not having the borders (dividers) run fully from top to bottom and hover background graphic.

    http://www.happydogwebproductions.com/nerdery/

    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I'd suggest:

    Code:
    #menu a {
        display: block;
        float: left;
        line-height: 21px;
        padding: 23px 19px;
    }
    
    #menu {
        margin: 0;
    }
    Making your anchor a block element fixes the hover behaviour (in IE at least, I don't have Safari 3).

    (As an aside, it's generally considered more appropriate/semantic to code your menu as an unordered list.)

  • Users who have thanked SB65 for this post:

    boogily (12-18-2010)

  • #3
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Thanks!
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"


  •  

    Posting Permissions

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