Po długiej walce znalazłem wreszcie rozwiązanie. Inline przegrał walkę z
floatem. Niech będzie dla potomności - kompletyny system zakładkowy :). Kod
CSS wygląda tak:

.zakladki_gora
{margin: 0px 12px 0px 12px;}

.zakladki_gora ul
{list-style-type: none;
padding: 0px;
margin: 0px;
width: 936px;}

.zakladki_gora li
{float: left;
border: #6D90B0 solid;
border-width: 1px 1px 0px 1px;
margin-left: 12px;
font-size: 14px;
color: #333333;
background-color: #F4F9FC;
text-align: center;}

.zakladki_gora a
{border-bottom-style: none;
display: block;
padding: 3px 3px 3px 3px;
width: 164px;
background-position: bottom;
background-color: #F4F9FC;
background-image: url('../obrazy/interfejs/zakladki_gora.png');
background-repeat: repeat-x;}

.zakladki_gora a.wybrana
{position: relative;
top: 1px;}

.zakladki_dol
{background-position: top;
margin: 0px 12px 12px 12px;
padding: 8px;
border: 1px solid #6D90B0;
background-color: #C6E0F2;
font-size: 13px;
text-align: center;
clear: both;
background-image: url('../obrazy/interfejs/zakladki_dol.png');
background-repeat: repeat-x;}

Działa bezbłędnie we wszystkim, nawet upiornym IE6 ;). I jeszcze skrypt do
przełączania zakładek:

function PrzygotujZakladki(Numer)
{
var Pozycja = Numer - 1;
$('div.zakladki_dol').hide().filter('#zakladka_' + Numer).show();
$('div.zakladki_gora ul li').eq(Pozycja).children().addClass('wybrana');
$('div.zakladki_gora a').click(function()
{
$('div.zakladki_dol').hide();
$('div.zakladki_dol').filter(this.hash).show();
$('div.zakladki_gora ul li a').removeClass('wybrana');
$(this).addClass('wybrana');
$(this).blur();
return false;
});
}

Efekt ostateczny + wygląd w przeglądarce skalującej całość i tylko
czcionki:

http://img705.imageshack.us/img705/3397/89704519.png
http://img849.imageshack.us/img849/7258/36015867.png
http://img20.imageshack.us/img20/9588/14234084.png


--
Pozdrowienia
Ai / mailto: n...@n...arg / ROT-13 /
"Najlepsza metodą do zainspirowania odkrywczych myśli, jest zaklejenie
koperty."