Tableless header design problem

Hi all,

I'm trying to design a web app home page without tables. I have a couple of css classes for a simple 2-tone header with text inside, and I want a 'logout' item to sit all the way on the right. It's a span floated to the right, and it looks fine on Firefox and Safari. But in IE, the span seems to be a block-level element with its own background color tacked onto the right side of the header. This is unacceptable.

Any workarounds for this?

 

Code?

cheers,

gary

 

.menuitem {padding: 2px 10px;}
.black {color:black;}
.blue {color:blue;}
.pointer {cursorointer;}
#header
{
background: steelblue;
height: 4em;
border-bottom: 1px solid black;
font-weight: bold;
}

#slogantext
{
font-size: 2em;
margin-left: 20px;
line-height: 2em;
}

<div id="header">
<div class="black menuitem"
title="Logout of RLG"
style="float:right;width:5%;"
onmouseover="this.className='blue menuitem pointer underline';"
onmouseout="this.className='black menuitem';"
onmouseup="window.location='/logout';">
Logout
</div>
<span id="slogantext">The Reed Larkey Group</span>
</div>

 

I'm not sure what the mechanism is, but give the float div {margin: 0 15px; display: inline;}. The {display: inline;} is an IE bug fix, and does not affect the float's actual block status.

It would really be better to use semantic markup rather than non-semantic div tags and naked text. Proper would also mean you don't need the javascript.

cheers,

gary