SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict n0other's Avatar
    Join Date
    Feb 2005
    Posts
    290
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link activation area too small with Firefox

    Here is my design: http://supra75.virusas.lt/

    The top navigation menu works in every browser as it should except firefox, it's activated (on hover) only when the mouse is at the top.

    Here's how the CSS that defines nav links style looks:

    Code:
    #navigation-links li a
    {
      padding: 11px 16px 12px 16px;
      color: #fff;
      text-decoration: none;
    }
    And on hover..

    Code:
    #navigation-links li a:hover
    {
      background: url(../images/nav_bar_active.gif) repeat-x;
    }
    If I add a border to the a:hover, the link area is normal, but it's activated only when the mouse is at the top. Thanks for any suggestions.

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add height:40px; in #navigation-bar and use
    #search-bar { /*height: 40px; position: relative;*/ padding-top: 6px; }

  3. #3
    SitePoint Addict n0other's Avatar
    Join Date
    Feb 2005
    Posts
    290
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazing, thank you very much, how were you able to identify the problem and what is different in firefox that made it not work?

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used the extension web developer and saw that the div #search-bar started from the left as told by position:relative;


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
  •