SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    2 problems with my menu bar

    on my menu bar,
    http://fixmysite.us/menu.php
    1) how do I vertically center the text, giving it a margin-top didn't work??)
    and 2) why is there a little white border to the right of the borders of each <li>?

    Thanksss
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For #1, add a line-height property with value = height.
    Code CSS:
    ul#menu li {
        border-right: 1px solid #000000;
        display: inline-block;
        height: 42px;
        line-height: 42px;
        list-style: none outside none;
        padding: 0 15px;
        text-align: center;
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    For problem 2, use float: left instead of display: inline-block;

    Code:
    ul#menu li {
      border-right: 1px solid #000000;
      float: left;
      height: 42px;
      line-height: 42px;
      list-style: none outside none;
      padding: 0 15px;
      text-align: center;
    }

  4. #4
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok, those fixes worked... thanks\But just so I know why the y worked,
    I changed line-height to the height of each li because each li needs a line-height (then I can apply a padding to it) equal to the desired height.
    And floating each li to the left makes them flush against each other?
    "Oh, and Jenkins--apparently your mother died this morning."

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The line-height fix is handy for text that only sits on one line. It forces the text box to the height of the container.

    I'm not sure why inline-block caused the effect you saw, but it doesn't work in older browsers while float does, so it's the easiest solution. Float makes an element wrap its contents tightly, which i handy in this situation.

  6. #6
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    gotcha!
    "Oh, and Jenkins--apparently your mother died this morning."

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yeah, inline-block is great, but it has a few quirk like what you experienced here, so I don't use it for menus. Paul O'B could tell you why inline-block left those left gaps. I'm sure I've seen him discuss it before, but my brain is a memory sieve!


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
  •