✔ Horizontale Navigation <li> floaten ohne feste Breite IE5.x & IE6.x

[rflx]

Hallo zusammen,

ich versuche eine horizontale Navigation mittels <li> zu floaten ohne eine feste Breite für das <li> zu bestimmen. Bei IE5.x und IE6.x funktioniert diese Methode nicht. Kann mir jemand einen Tipp geben wie ich diese horizontale Navigation realisieren kann damit es Barrierefrei ist?

HTML:

<div class="mod_navigation block">

<a href="index.php/news.html#skipNavigation_4" class="invisible" title="Navigation überspringen"></a>

<ul class="level_1">
<li class="first"><a href="index.php/home.html" title="home" class="first" onclick="this.blur();">home</a></li>
<li class="active"><span class="active">news</span></li>
<li><a href="index.php/about.html" title="about" onclick="this.blur();">about</a></li>
<li><a href="index.php/brands.html" title="brands" onclick="this.blur();">brands</a></li>
<li><a href="index.php/team.html" title="team" onclick="this.blur();">team</a></li>
<li><a href="index.php/contact.html" title="contact" onclick="this.blur();">contact</a></li>
<li class="last"><a href="index.php/friends.html" title="friends" class="last" onclick="this.blur();">friends</a></li>
</ul>
 
<a id="skipNavigation_4" class="invisible" title="Navigation überspringen"></a>

</div>

CSS:

.mod_navigation{width:800px;overflow:hidden;display:block;margin-right:25px;margin-left:25px;border-right:1px solid #ff1797;border-left:1px solid #ff1797;}
.mod_navigation ul{margin:0px;padding:0px;}
.mod_navigation li{float:left;margin:0px 10px 0px 0px;padding:0px;text-align:left;list-style-type:none;}

.mod_navigation .active,.mod_navigation a{font-weight:bold;font-size:20px;color:#ffffff;}
.mod_navigation a{height:30px;display:block;margin:0px;padding:0px;text-align:left;background-color:#cc0000;font-weight:bold;text-decoration:none;font-size:20px;color:#ffffff;line-height:30px;}
.mod_navigation a:hover{background-color:#b30000;text-decoration:none;color:#ffffff;}
.mod_navigation .active{height:30px;background-color:#b30000;line-height:30px;}

- Mozilla Firefox & IE 7: OK
- IE 5.x & IE6.x: Nicht OK

Bedanke mich schon im Voraus für die Hilfe.

rflx

 

[Maik]

Hi,

tausch mal für die Links die display:block-Deklaration gegen float:left aus.

mfg Maik

 

[rflx]

Hallo Maik,

funktioniert, danke!

Tönt relativ einfach.. Wieso das mir nicht eingefallen ist.. tss

Warum ist das so mit <li> und fester Breite im IE 5 und IE6?

salüü und danke

rflx

 

[Maik]

Nein, ich sprach von den Links, deren derzeitige display:block-Deklaration gegen float:left ausgetauscht werden soll.

.mod_navigation a{height:30px;float:left;margin:0px;padding:0px;text-align:left;background-color:#cc0000;font-weight:bold;text-decoration:none;font-size:20px;color:#ffffff;line-height:30px;}

mfg Maik

 

[rflx]

Nein, ich sprach von den Links, deren derzeitige display:block-Deklaration gegen float:left ausgetauscht werden soll.

display: block - Deklaration kann man beibehalten wenn man die Fläche braucht.

Danke nochmals

rflx

 

[Maik]

display: block - Deklaration kann man beibehalten wenn man die Fläche braucht.

float:left verleiht den Inline-Elementen ebenfalls "Block-Level-Charakteristika", wenn man die Fläche benötigt.

mfg Maik