Trouble with tabs

[nfs2]

Im having a real headache getting my tabs positioned correctly. Im using absolute positioning, and it work perfect in safari and firefox, but in IE and opera, the li's are stacked on top of eachother (they should be side-by-side)

Here's my code;
CSS:

#tabs ul {
position: absolute;
left: 700px;
top: 48px;
float: right;
list-style: none;
}

#tabs li {
margin: 0 1px 0 0;
padding: 0 5px 0 0;
background: url(tab-back.png) 100% -100px;
float: left;
border-bottom: 1px solid #4B87C3;
}

#tabs li.active {
border-bottom: 1px solid #fff;
background: url(tab-back.png) 100% 0;
}
#tabs li a {
display: block;
text-align: center;
padding: 5px 6px 5px 11px;
white-space: nowrap;
background: url(tab-back.png) 0 -100px;
text-decoration: none;
}
#tabs li.active a, #tabs li.active span {
background: url(tab-back.png) 0 0;
}

HTML:

<div id="tabs">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Journals</a></li>
<li><a href="#">Pictures</a></li>
</ul>
</div>

Is there something im doing weird here that will break it in IE and opera? I'd like the tabs (li's) to stay side by side

[Setek]

Is there a reason they have to be absolutely positioned? I know IE sometimes "absolutely positions" objects in usual IE fashion - incorrectly.

If I had to do a horizontal menu, I would do it in floats, but that might just be me :)

[nfs2]

Yeah i only use absolute as a last resort. In this case i need to partially overlap a div below it, and making it look the same in all browsers, it seemed absolute would be easiest

But i dont wanna get too off topic. Have any idea how to fix this?

[Setek]

Hrmm... okay, got it:

Your ul is positioned absolutely, cool, wicked, no width on it :)

Your lis are floated left within the ul - cool, until your browser window is too small - this isn't an IE & Opera specific problem - this happens in firefox too at 800*600. Once the browser window is big enough, your list items sit horizontally, like they're supposed to.

So, set a width to your ul, or don't set your lis to float left :) When the space floats are occupying is too small, it bumps below one another, because it's floating.

Hope that can solve your problem :)

[nfs2]

Ok i set a width to it, and it seems to have fixed it in opera.

I just this minute upgraded to the new beta IE, and it never had the problem to begin with, so i can only hope it also solved the problem for the current IE (im sure it did, i'll have to check on another computer.. lol)

Thanks a lot man

[nfs2]

Im still having some trouble positioning it though.. It seems different browsers have a different idea of where the "absolute" position i say is.

Here's the deal; Directly under the code i posted, there's a <div id="border">. Its just a line 1px high. I positioned (well, in whatever browsr decided to work) the tab menu to overlap it by 1px, so the bottom border of the tab menu lines up with the border of the border div.

Still with me?

Ok, so in firefox and safari its perfect. In the opera, the tab menu is too low, and the border goes through the middle of the tab menu. In the new IE, as well as previous IE's, the tab menu is too high, by between 20-49px depending on the operating system.

Here's the CSS for the border div

.bottomborder {
clear: both;
height: 1px;
background: url(line.png) bottom repeat-x;
}

Now, by positioning absolute, it positions it on the screen, relative to nothing but the screen right? So no matter what other code i have the element should be in the same place for every browser right?

Cause i been at this all night and im stumped.

[nfs2]

I did it! Its done! And it only took 9 hours and 5 cups of coffee!

Gotta love non-standards compliant browsers