ul border-bottom problem in IE

[doobie]

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:

Code:

• home
• blog
• csa
• recipes
• contact

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

[AshtonSanders]

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;
}

[doobie]

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

[doobie]

No difference when I remove the border-radius.

I’ll reformat the CSS and repost it here.

Thanks for the help.

-Doobie

[cssfreak]

Code:

try this add it in the head tag

[doobie]

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

[doobie]

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;}

[AshtonSanders]

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,

[doobie]

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

[doobie]

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

[AshtonSanders]

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. ;) )

[Author]

Posts