Small border glitch in mozilla

[Deicidus]

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.

[NewComputer]

I am seeing a border in FF 1.0+

[Deicidus]

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.

[J.D.]

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.

[Deicidus]

That works, thanks!

[J.D.]

I'm not sure why yet.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.

[Deicidus]

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