Advanced Search

Results 1 to 2 of 2

Thread: a:hover border problem

  1. #1
    Join Date
    Jun 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question a:hover border problem

    I have the following css for a list of links:

    Code:
    #promo ul {list-style-type:none;font-size:11px;}
    #promo ul li a {color:#fff;display:block;height:1%;padding:.6em .5em;text-decoration:none;}
    #promo ul li a:hover {background:#0082ae;border-bottom:2px solid #006393;border-top:1px solid #30aecd;}
    My problem is that because there is only a border on the a:hover, when you hover the text of the link moves down to incorporate the border. Is there a way to increase the height of the li a so that the text doesn't move when you hover over it?

  2. #2
    Join Date
    Jun 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok. I'm a moron. I fixed it. Just adjusted the padding to compensate for the border. So made the corrected code:

    Code:
    #promo ul li a {color:#fff;display:block;height:1%;padding:8px 6px 8px 6px;text-decoration:none;}
    #promo ul li a:hover {background:#0082ae;border-bottom:2px solid #006393;border-top:1px solid #30aecd;padding:7px 6px 6px 6px;}
    Duh. Sometimes the easiest solution is hardest to see.

Bookmarks

Posting Permissions

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