Zakładki - problem z IE Opcje

[xamil]

Przykład: http://www.kamil.klecza.pl

Założenia jakie to menu powinno spełniać:
1. powinno wyglądać pod wszystkimi przeglądarkami identycznie (czyli tak jak wygląda obecnie pod ff/operą)
2. powinno mieć stałą wysokość tzn. nie zależną od tego jaką np. ustawie czcionke w tabach czyli tak jak teraz powinno ją uciąć
3. Obok powinno dać się umieścić jakąś belke z np. jakimiś dodatkowymi przyciskami tak jak to jest teraz (ff/opera).


Ten przykład działa wszędzie prócz ie < 7.0:( W 7.0 o dziwo to poprawili.

Jakieś sugestie jakbym mógł zmienić to menu?

Ten post edytował xamil 11.09.2006, 11:35:01

[s_w_ir]

Do listy dodajemy np. dwa elementy które mają klase right

[HTML] pobierz, plaintext 
<ul id="zakl_naw">
<li class="przepisy"><a href="#">Przepisy</a></li>
<li class="kontakt"><a href="#">Napisz do nas</a></li>
<li class="artykuly"><a href="#">Artykuły</a></li>
<li class="zakupy"><a href="#">Sklep internetowy</a></li>
<li class="right"><a href="#">Prawy One</a></li>
<li class="right"><a href="#">Prawy Two</a></li>
</ul>
[HTML] pobierz, plaintext 

a w CSSie po ul#zakl_naw li (na wszelki wypadek, i dla przejrzystości)

Kod

ul#zakl_naw li {
   float: left;
   height: 21px;
   background-color: #B51032;
   color: #FFFFFF;
   margin: 2px 2px 0 2px;
   border: 1px solid #711515;
}

ul#zakl_naw li.right //od tąd dodajemy
{
   float: right;
}

Cała moc skryptu polega na tym że dla każdej strony możemy zdefiniować zupełnie inny wygląd dzięki id przy body, np. każda strona może kryć inną kolorystyke.

Robiąc teraz klase right tracimy wygląd aktywnej zakładki, ale zmieniając kod na taki(że tak powiem indywidualny):

[HTML] pobierz, plaintext 
<li class="zakupy"><a href="#">Sklep internetowy</a></li>
<li class="prawy1"><a href="#">Prawy One</a></li>
<li class="prawy2"><a href="#">Prawy Two</a></li>
[HTML] pobierz, plaintext 

i dodając do CSSa

Kod

ul#zakl_naw li {
   float: left;
   height: 21px;
   background-color: #B51032;
   color: #FFFFFF;
   margin: 2px 2px 0 2px;
   border: 1px solid #711515;
}

ul#zakl_naw li.prawy1, ul#zakl_naw li.prawy2 //to jest dodane
{
   float: right;
}

...
body#przepisy li.przepisy, body#kontakt li.kontakt,
body#artykuly li.artykuly, body#zakupy li.zakupy, body#prawy1 li.prawy1, body#prawy2 li.prawy2 { // tu sa dopisane klasy
   border-bottom: 1px solid #fff;
   color: #000000;
   background-color: #FFFFFF;
}

body#przepisy li.przepisy a:link, body#przepisy li.przepisy a:visited, body#kontakt li.kontakt a:link,
body#kontakt li.kontakt a:visited,
body#artykuly li.artykuly a:link,
body#artykuly li.artykuly a:visited, body#zakupy li.zakupy a:link,
body#zakupy li.zakupy a:visited, body#prawy1 li.prawy1 a:link, body#prawy1 li.prawy1 a:visited, body#prawy2 li.prawy2 a:link, body#prawy2 li.prawy2 a:visited{ // tu sa dopisane klasy
   color: #000000;
   background-color: #FFFFFF;
}

Otrzymamy to co chcemy.
Btw. skrypt jest z książki CSS Antologia, a autorka owej ksiązki ów pomysł zaczerpneła z http://unraveled.com/projects/css_tabs/