Little Awkward Gaps are working their way into my CSS Layout

[Kraetos]

I'm working on this WordPress theme and I've put some stuff in the header that doesn't always stay put. There's a logo, as well as some navigational tabs, that are sitting above the main div. The main div has a border and the design calls for this stuff to rest right on the border. Problem is that even the slightest change in causes the tabs to float up or dig into the border. It looks different in Safari than in Firefox, and if you change the font size, things begin to break...

Anyway, here's the blog:

http://coverleaf.thehardsix.com

Here's the relevant markup:

XHTML:

<img src="http://coverleaf.thehardsix.com/wp-content/themes/coverleaf/img/logo.png" class="logo">

<div id="title">

<h1 class="title">Coverleaf</h1>
<small class="description">magazines to read, share and enjoy</small>

</div>

<div id="tabs">

<a href="#">A Link!</a>
<a href="#">Another Link!</a>

</div>


CSS:

#main { // this is creating the red border that the tabs need to sit on
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: white;
border: 4px solid #9a2b34;
margin: 0px;
clear: both;
min-height: 1000px;
}

.logo { // the logo on in the top corner. it sticks to the border surprisingly well
float: left;
margin-left: 20px;
}

#title {
margin: 2em 0 -1em 200px;
}

#title h1{
display: inline;
font-size: 22pt;
}

.sIFR-active .title
{
visibility: hidden;
font-family: Verdana;
line-height: 1em;
}

#tabs { // these fuckers do whatever they want, though
float: right;
margin-right: 2em;
}

#tabs a { // this just defines the tab
background-color: #6ab1e5;
padding: 2px 12px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
}


(Yes I know my borders wont work in IE. They'll just be square. But IE users have no sense of aesthetics anyway, so they wont notice ;) In seriousness, I'll go back later with some images in hand and hack up a workaround. But this works for now.)

[jdcfsu]

Have you tried changing the #tabs css from margin-right: 2em; to margin: 0 2em 0 0; ? It looks like either a padding or a margin issue so try setting those to 0 and see what happens.

[Kraetos]

Have you tried changing the #tabs css from margin-right: 2em; to margin: 0 2em 0 0; ? It looks like either a padding or a margin issue so try setting those to 0 and see what happens.

Mmmm no luck, but good idea. I think you're right, it looks like it has to do with the default margins and padding.

What's weird to me is that the logo stays put while the tabs go wherever the hell they want.

[jdcfsu]

Interesting. Have you try changing the #tab a { padding: 2px 12px; } to padding: 2px 12px 0 12px; and see what happens. There is some sort of padding that's not playing nicely.

[Kraetos]

Interesting. Have you try changing the #tab a { padding: 2px 12px; } to padding: 2px 12px 0 12px; and see what happens. There is some sort of padding that's not playing nicely.

I switched everything over to pixels when I realized that changing the font size would also change an em-based spacing. Still no luck.

[jdcfsu]

Yeah, but making the bottom margin on the tabs a to 0, have you tried that too yet?

[Kraetos]

Yeah, but making the bottom margin on the tabs a to 0, have you tried that too yet?

Can't, that padding is there for a reason. Without it the tabs would float or the link would ride the red line.

I'm tinkering right now to see if there's an em value that would cause it to scale with font size properly. I don't think there is.

[EDIT] there isn't.