1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Menu problem - help please

Discussion in 'CSS' started by diablo999, Oct 17, 2009.

0
  1. #1
    Hi all,

    Hope someone can help, this is driving me nuts!
    This menu works fine, but the buttons are larger (higher) in Firefox and Opera, than in IE. I need the buttons to look the same height as in IE. I have fiddled with the height setting, and also tried adding padding-top, but can't get the required result.

    Any suggestions anyone please? Code and css below:

    Many thanks, db
    -

    The HTML:

    <div class="buttonscontainer">
    <div class="buttons">
    <a href="index.htm">Home</a>
    <a href="page1.htm>blah1</a>
    <a href="page2.htm">blah2</a>
    <a href="page3.htm">blah</a>
    <a href="page4.htm">blah4</a>
    <a href="page5.htm">blah5</a>
    <a href="page6.htm">blah6</a>
    </div>
    </div>



    The CSS:

    .buttons a {
    color : #202020;
    height : 28px;
    background-color : #9FA3AA;
    padding : 2px;
    padding-left : 6px;
    padding-top : 6px;
    display : block;
    border-bottom : 1px solid #ffffff;
    border-left : 0px solid #f2f6fa;
    font : 14px Arial, Geneva, sans-serif;
    font-weight : normal;
    text-decoration : none;
    text-align : left;
    vertical-align: middle;

    }
    .buttons a:hover {
    color : #FFFFFF;
    font : 14px Arial, Geneva, sans-serif;
    font-weight : normal;
    text-decoration : none;
    background-color : #7CB0E0;
    border-left : 0px solid #ffffff;
    vertical-align: middle;

    }
    .buttons a:visited {
    color : #202020;
    font : 14px Arial, Geneva, sans-serif;
    font-weight : normal;
    text-decoration : none;
    background-color : #9FA3AA;
    border-left : 0px solid #ffffff;
    vertical-align: middle;

    }
    .buttons a:visited:hover {
    color : #FFFFFF;
    font : 14px Arial, Geneva, sans-serif;
    font-weight : normal;
    text-decoration : none;
    background-color : #7CB0E0;
    border-left : 0px solid #ffffff;
    vertical-align: middle;
    }
     
    diablo999, Oct 17, 2009 IP
  2. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #2
    I would guess that it's got something to do with this:

    padding : 2px;
padding-left : 6px;
padding-top : 6px;
    Code (markup):
    You are declaring a 2px padding for top, right, bottom and left, before revising the padding for left and top to 6px.

    Get rid of padding: 2px; and set padding individually for each dimension (top, right, bottom and left). Or get rid of the individual padding and only leave padding: 2px;.

    Maybe that'll fix it. I'm not sure.
     
    Masterful, Oct 17, 2009 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Lemme guess, you threw IE into Quirks mode?
     
    Dan Schulz, Oct 18, 2009 IP
  4. diablo999

    diablo999 Guest

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yo thanks Masterful. The 4 separate delarations did the trick, after removing the height dec. completely. This is the problem when you copy/paste code without fully understanding it.
    I am now so happy I may go outside for a few minutes!

    Thanks again, db~
     
    diablo999, Oct 18, 2009 IP