SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Which markup controls space between menu links??

    I cobbled together some CSS and came up with this site:

    http://www.molnarstuxedo.com/home.php

    I cannot, however, figure out why the padding between the menu links is greater in IE than in FF. No big deal, I could fix it, but I *cannot* figure out which markup controls the padding/margin between the links. Can someone help me with this?

    Thanks for any assistance.
    Web Design, Marketing, Etc .............
    ....

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    London, UK
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Someone in here is going to Cain me for giving advice when I am only learning myself, but it appears to be a similar problem know as box model error in IE. If you check the FAQ in the CSS http://www.sitepoint.com/forums/showthread.php?t=171943.

    Hope that this help.

    Nice site BTW.

    Regards
    Morn

  3. #3
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Morn...I think this is not the issue, though...I just can't find what element controls the spacing --- I borrowed some of the CSS and can't figure it out!
    Web Design, Marketing, Etc .............
    ....

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You're using <h*> tags which display differently in FF/IE. Try adding this to your css file...

    .btn h3 {margin-top: 0;}

  5. #5
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You got it bluedreamer. Thanks again, works great now.

    - Dave
    Web Design, Marketing, Etc .............
    ....

  6. #6
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Play around with the padding and margin settings here:
    ul.btn li a, ul.btn li a.on {
    font-family: 'trebuchet ms',verdana, sans-serif;
    background-color: transparent;
    margin: 0 auto 0 auto;
    padding : 10px 0px 3px 10px;
    width : 162px;
    height : 20px;
    color : #FFFFFF;
    text-align : left;
    display : block;
    text-decoration : none;
    border:1px solid #000000;
    font-weight:bold;
    background-color : transparent;
    /* This image lays over the Hover state pretty image */
    background-image:url(../images/bg_opacity_obscure.gif);
    background-repeat:repeat-x;
    }


    changing the padding to
    padding : 10px 10px 10px 10px;

    centered the text in each button.
    You may want to look at using margin-bottom to play around with the actual spacing between the buttons.

    Nadia


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
  •