Small border glitch in mozilla

Using any mozilla browser, my menu looks a little weird on my page at http://www.thinkdammit.net.

In between the menu items "For CHS Students" and "My Adoring Fans", there's no border, but there should be. The CSS files are under /includes/layout.css and /includes/presentation.css.

I'd really appreciate it if someone could give it a look.

 

I am seeing a border in FF 1.0+

 

Oops, I didn't quite say it right. Here's more exact info:

Firefox 1.0 for Windows: no border between "My Reviews" and "Guest Authors".
Camino 0.8.2 (for Mac): no border between "For CHS Students" and "My Adoring Fans".
IE 6.0 (for Windows) borders all display correctly.
Opera 7.54 for Windows: borders all display correctly.

I'm looking at it right now on both my mac and PC, and seeing this problem.

 

Change em's to px's in the following. It seems to fix the problem. I'm not sure why yet.

#masthead{
margin: 0;
border-bottom: 1px solid #FFFFFF;
padding: 1em 0;
}

J.D.

 

That works, thanks!

 

I think I figured it out. I think you took the advice to use em's *everywhere* too close to your heart. Every time you are doing something like padding: .1em, a floating point operation has to be performed to obtain the computed value. Being a floating point operation, it will always suffer from rounding, which seems to be happening here. Use pixels for small paddings, margins and borders, not .1em's:

#navBar ul a{display: block; padding: 1px 0 1px 1em;}

J.D.

 

Ah, I see. You're right; small borders shouldn't scale with the rest of the page anyway. I'll go through my CSS file and change small things to pixels when I get the chance.

Thanks again!
-Deicidus