Grow your CSS skills. Land your dream job.

ul border-bottom problem in IE

  • # May 20, 2009 at 8:44 pm

    Hi there,

    I’m a first time poster, but long time visitor.

    I’m working on a quick little project for a friend and am trying to make a menu similar to the one on this site. As you can see from the screenshots, I want the bottom border to disappear on the active page/tab. I accomplished this in FF by making the active page <li> one pixel taller. This doesn’t seem to work in IE.

    Some code, html first:

    And some CSS:

    Code:
    #nav ul { padding: 0 0 36px; margin-left: 25px; border-bottom: 1px solid black; width: 422px;}
    #nav li { float:left; margin-right: 3px; text-align: center; font-weight: bold; }
    #nav li.borderless {margin-right: 0px;}
    #nav a { width: 80px; height: 35px; display: block; border: 1px solid black; color: #4878a6; font-size: 1.5em;
    height: 35px; background: #adb6bf; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
    line-height: 35px; }
    #nav a:active, #nav a:hover { text-decoration: none; color: #adb6bf; background: #4878a6;}
    body#home li.home a { text-decoration: none; color: #222; background: #dfefff; border-bottom: 1px solid #dfefff;; height: 36px;}
    body#blog li.blog a { text-decoration: none; color: #222; background: #dfefff; border-bottom: 1px solid #dfefff;; height: 36px;}

    I’m sure this is not the best way to accomplish the effect I’m after, but it’s the quickest/easiest/first thing that [del]worked[/del] i could think of.

    Oh yeah, no live site yet. Just doing a quick static site on my local machine. sorry.

    Thanks for your help and/or advice.

    -Doobie

    # May 20, 2009 at 10:49 pm
    Quote:
    Code:
    -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;

    That’s not CSS 2.1 so it won’t work in IE6. Honestly I haven’t even looked into it because it doesn’t work in IE6.

    I would recommend formatting your CSS so it’s easier to read though (at least for posting here). for example:

    Code:
    #nav ul {
    padding: 0 0 36px;
    margin-left: 25px;
    border-bottom: 1px solid black;
    width: 422px;
    }
    # May 20, 2009 at 11:28 pm

    good point, ashton. Sorry for the crappy formatting. Yeah, I know border-radius isn’t css 2.1 compliant. That, i certainly hope, wouldn’t make the difference. I’ll give it a shot and report back. Just a progressive enhancement, as they say.

    -Doobie

    # May 20, 2009 at 11:29 pm

    No difference when I remove the border-radius.

    I’ll reformat the CSS and repost it here.

    Thanks for the help.

    -Doobie

    # May 21, 2009 at 12:27 am
    Code:

    try this add it in the head tag

    # May 21, 2009 at 1:05 am

    Good thinking, but no luck.

    I forgot to detail all of the troubleshooting steps that I’ve already tried.

    1. Setup an IE only style sheet and set padding to 0 on the #nav ul element.

    2. Tried to set the active page button to border-bottom: none.

    3. I also tried changing the height of the active page li, but that didn’t work either.

    Too bad you can’t set negative padding ;-).

    Any other ideas?

    -Doobie

    # May 21, 2009 at 1:08 am

    Oh, and here’s the CSS in a better format:

    Code:
    #nav ul {
    padding: 0 0 36px;
    margin-left: 25px;
    border-bottom: 1px solid black;
    width: 422px;}

    #nav li {
    float:left;
    margin-right: 3px;
    text-align: center;
    font-weight: bold; }

    #nav li.borderless {
    margin-right: 0px;}

    #nav a {
    width: 80px;
    height: 35px;
    display: block;
    border: 1px solid black;
    color: #4878a6;
    font-size: 1.5em;
    height: 35px;
    background: #adb6bf;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    line-height: 35px; }

    #nav a:active, #nav a:hover {
    text-decoration: none;
    color: #adb6bf;
    background: #4878a6;}

    body#home li.home a, body#blog li.blog a {
    text-decoration: none;
    color: #222;
    background: #dfefff;
    border-bottom: 1px solid #dfefff;
    height: 36px;}

    # May 21, 2009 at 1:52 am

    Thanks

    Some notes:

    You have height declared twice for #nav a, and you probably don’t want to do line-height: 35px; Is there a reason you have that?

    Code:
    #nav a {
    width: 80px;
    [b]height: 35px;[/b]
    display: block;
    border: 1px solid black;
    color: #4878a6;
    font-size: 1.5em;
    [b]height: 35px;[/b]
    background: #adb6bf;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    line-height: 35px; }

    Also for your #nav UL, I would use Height instead of padding:

    Code:
    #nav ul {
    padding: 0;
    height:36px;
    margin-left: 25px;
    border-bottom: 1px solid black;
    width: 422px;}

    Let me know how that goes,

    # May 21, 2009 at 11:21 am

    Ashton,

    Thanks for your help! I must have copied the CSS wrong (again) because the height was only declared once for that element.

    BUT, changing the padding to height for the <ul> element did the trick! I also did away with the line-height…

    Thank you very much for the help. I was ready to pull my hair out. The site is working great, and should be live soon at http://shipkifarm.com for you to critique ;-)

    Cheers,

    Doobie

    # May 21, 2009 at 4:31 pm

    I remember why I did the line-height now. I wanted the text in the buttom to be centered vertically as well as horizontally.

    # May 21, 2009 at 5:23 pm

    Just use padding-top: for the anchors to bring the text down. (note: you’ll probably have to decrease the "height" by the amount of padding-top you add. ;) )

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".