SitePoint Sponsor

User Tag List

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

    web page looks good in FF but IE shows 1 error?

    http://coronadoreconsultants.com/index.php
    in IE, why is the navbar all screwed uyp?
    Is it the right border on the last li?

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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The nav is broken in all browsers as fas I can see and the last item wraps to the next line.

    You can't make x number of items fit along the length of a navbar exactly by using the length of the text-size and padding. Some browsers will render text much wider than others so its a flawed approach. You should allow at least 50px of breathing space to account for the differences which would mean putting the ribbon effect on other elements and not making the text fit so tightly along that nav.

    You could alternatively use display:table display:table-cell (ie8+) to fill the whole line equally without requiring padding.

    A quick fix would be to not float the last element and set it to overflow:hidden and text-align:center. This means that no padding is needed on the last item and gives a few pixels of breathing space.

    e.g.
    Code:
    #smoothmenu1 > ul > li:last-child {
    float:none;
    overflow:hidden;
    text-align:center;
    display:block;
    position:static;
    }
    
    #smoothmenu1 > ul > li:last-child a{
    padding:8px 0;
    }
    For older browsers you would need to add a class to the last list item instead of using first-child and apply the styles above via that class.

  3. #3
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I took off the left/right padding a gave each li a seperate width, and put the right nub on the ul instead of the li which seems to work, is that ok?
    "Oh, and Jenkins--apparently your mother died this morning."

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lukeurtnowski View Post
    I took off the left/right padding a gave each li a seperate width, and put the right nub on the ul instead of the li which seems to work, is that ok?
    Yes that will allow you a little leeway with text size and maybe even text resize. (Always try zooming the text just to see what will happen if text runs to longer than you think.)


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
  •