Sooo,
also neues Html sieht so aus:
<div id="navigationDiv">
<ul id="navigation">
<li class="menuPlaceholder" id="menuPlaceholder1"> </li>
<li class="menuPlaceholder"></li>
<li class="menuTabs" id="menuTab1"><span><a>Start</a></span></li>
<li class="menuPlaceholder"></li>
<li class="menuTabs" id="menuTab2"><span id="current"><a>Team</a></span></li>
<li class="menuPlaceholder"></li>
<li class="menuTabs" id="menuTab3"><span><a>Anfahrt</a></span></li>
<li class="menuPlaceholder"></li>
<li class="menuTabs" id="menuTab4"><span><a>Angebote</a></span></li>
<li class="menuPlaceholder"></li>
<li class="menuTabs" id="menuTab5"><span><a>Kontakt</a></span></li>
<li class="menuPlaceholder" id="menuPlaceholderLast"></li>
</ul>
<div id="navigationLineDiv1"></div>
</div>
css:
#navigationDiv {
margin: 0 auto;
width: 860px;
background: url(images/mainDivShadow.gif);
padding-top: 25px;
}
#navigation {
list-style: none;
margin: 0;
padding: 0;
}
.menuTabs {
border: 1px solid #999;
float:left;
height: 18px;
font-weight: bold;
font-size:1.1em;
color: #777;
background: url(images/tabBackground.gif) repeat-x;
}
.menuPlaceholder {
width: 2px;
float: left;
height: 18px;
background: url(images/menuPlaceholderBackground.gif);
}
#menuPlaceholder1 {
width: 3px;
background: transparent;
}
#menuPlaceholderLast {
width: 409px;
}
.menuTabs span{display: block;}
/* Animation */
.menuTabs span:hover {
color:#427bd6;
cursor: default;
}
#current{
background: url(images/tabBackgroundActive.gif) repeat-x bottom;
border-bottom: 2px solid #cfcfcf;
color: #427bd6;
margin-top: 0px;
}
/* Animation End */
#menuTab1{width:75px;}
#menuTab2{width:75px;}
#menuTab3{width:90px;}
#menuTab4{width:95px;}
#menuTab5{width:90px;}
#menuTab6{width:90px;}
#navigationLineDiv1 {
margin: auto;
font-size: 0pt;
height: 2px;
width: 854px;
background: #cfcfcf;
clear: left;
}
Die runden ecken werden trotzdem noch nicht angezeigt (im ie7)
Danke und viele Grüße
Steffen