CSS menu issue in firefox

Discussion in 'CSS' started by L3G10N, Dec 27, 2010.

  1. #1
    I am having trouble with the links in my css menu in firefox. When I go to click all the first links, then there is only a small region allowed. This only happens in firefox. Any help would be appreciated, as I want to be able to roll over the links just like Login and Register. All the code validates, but it's something stupid. If anyone is proficient with CSS and HTML and would be kind enough to look it over.

    here is the menu
    http://tournamentwarfare.com/newmenu/index.html

    Thanks again
     
    Last edited: Dec 27, 2010
    L3G10N, Dec 27, 2010 IP
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    The login block is interfering with nav block.
    
    #login {
    margin-top:-8px;
    padding-bottom:4px;
    padding-left:4px;
    padding-right:4px;
    padding-top:4px;
    position:absolute;
    right:170px;
    top:0;
    width:1025px; [COLOR="red"]<-- Remove [/COLOR]
    }
    
    Code (markup):
    Just a caution, there is no need of absolute positioning for login block. Try resizing your browser window you'll come to know why.
     
    radiant_luv, Dec 27, 2010 IP
    L3G10N likes this.
  3. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The problem is in the style for your divs 'nav' and 'login'. You have the width of both divs set to "1025px;". Logically, it doesn't make sense because both sections of the menu have no need to be 1025 pixels wide each. By removing those two widths, the mouse hovering works as expected.

    While testing your page, I found another problem which may not be as obvious to you. If you resize the page or have a different screen resolution, the 'login' div will be out of place. This has to do with your use of absolute positioning. I may have the same screen resolution as you but others do not. Use the zoom functions of your current browser to zoom in or out and you will see how the absolute positioning affects the layout. You seem to use absolute positioning to force your menu above the image within your 'header' so that the image acts as a background image. If thats the case, why not make the image a background-image in CSS for the header and then move the 'nav' and 'login' divs within the 'header' div?

    Edit: Beat by radiant_luv :(, but he says the same thing.
     
    AssistantX, Dec 27, 2010 IP
    L3G10N likes this.
  4. WebPageMistakes

    WebPageMistakes Well-Known Member

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    110
    #4
    According to the Web Developer Toolbar in FF you have a couple of errors:
    The W3C CSS validator gives a more comprehensive explaination:
    Fix these and see if that solves your problem.
     
    WebPageMistakes, Dec 27, 2010 IP
  5. L3G10N

    L3G10N Well-Known Member

    Messages:
    370
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    158
    #5
    Thanks for the help. I was going about it all wrong. +rep given for helping me see the light.
     
    L3G10N, Dec 28, 2010 IP