Horizontale Liste über variable Breite

[Oliver]

Hallo zusammen,

stehe grade auf dem Schlauch:

Ich habe eine horizontale Navigation mit (immer) vier Punkten und Trennstrichen (als Grafik) dazwischen:

Punkt1 | Punkt2 | Punkt3 | Punkt4

Nun möchte ich den Abstand der Punkte nach links/rechts so breit bekommen, dass die Navigation immer die ganze (variable) Fensterbreite einnimmt. Ob die Trenner Images oder BG-Grafiken werden, ist egal. Im IE muss es nicht funktionieren.

Meine Lösung sieht bisher so aus, dass die vier normalen li eine Breite von 24.5% (ca. 1/4) und die Trenner-li eine Breite von 1px bekommen.

Problem: Die vier normalen li sind gleich breit. Damit haben die Menütitel links und rechts nicht alle den gleichen Abstand zu den Trennstrichen, da nicht alle Menütitel gleich lang sind:

.AAA..|.BBB..|CCCCCC|.DD...

Die li sollten also proportional breit zu ihren Menütiteln sein, wofür ich wohl padding statt width anpassen müßte, aber wie?

Kennt jemand einen besseren Ansatz?

Hier das HTML & CSS:

<div id="navigation">
<ul>
<li class="hi"><a href="">Punkt_1_aaa</a></li>
<li class="divider"><a href="">&nbsp;</a></li>

	<li><a href="">Punkt\_2\_bbbbbbb</a></li>  
	<li class="divider"><a href="">&nbsp;</a></li>  
	  
	<li><a href="">Punkt\_3\_cc</a></li>  
	<li class="divider"><a href="">&nbsp;</a></li>  
	  
	<li><a href="">Punkt\_4\_dddd</a></li>  
</ul>  
<div class="clear"></div>  

</div>

Das äußere div#navigation ist noch für eine BG-Grafik drum, kann aber auch weg, wenn die Grafik in li/a geht.

#navigation {
background:url('../images/nav_bg.png') repeat-x 0 0;
min-height:46px;
padding:0;
        margin:0;
}

#navigation ul {
margin:0;
padding: 0;
list-style: none;
font-size:0.75em;
}

#navigation ul li {
float:left;
display:block;
width:24.5%;
padding:0;
text-align:center;
list-style-type:none;
}

#navigation ul li a {
display:block;
text-decoration:none;
padding:15px 0 15px 0;
color:#CCCCCC;
}

#navigation ul li.divider {
background:url('../images/nav_trenner.png') no-repeat center 0;
width:1px;
}

#navigation ul li.hi a {
background:url('../images/nav_bg_high.gif') no-repeat center bottom;
color:#FFFFFF;
}