✔ Css-List-Menü wird im ie Falsch dargestellt

[chaosente]

Hallo ich krieg ne ganz merkwürdige darstellung meines menüs im internet explorer.

Kann mir das nciht erklären. Im Anhang kann man sehen was ich meine!

edit:// hier noch mein mein css code:

#navigation {
float:left;
width: 150px;
margin: 0px auto;
color:#555555;
}

p.navi_title {
font-size: 0.7em;
font-weight:bold;
text-align:center;
border-bottom: 1px dashed gray;
background: #CCCCCC;
}

.navi_list li {
list-style-type:none;
diplay:block;
}

.navi_sub_title {
border: 1px dashed gray;
border-left:none;
background:#cccccc;
margin: 1px 20% 1px 0px;
font-size: 0.6em;
font-weight:bolder;
padding-left:3px;
letter-spacing:0.2em;
line-height:1.4em;
}
.navi_item a {
display:block;
margin: 1px 0px 0px 10%;
border:1px dashed #dddddd;
font-size: 0.7em;
padding: 1px;
padding-left:15px;
background: transparent url(../images/list-normal.png) 3px 50% no-repeat;
line-height: 1.25em;
vertical-align:middle;
outline: none;
cursor: pointer;
}

.navi_item :hover {
background: transparent url(../images/list-hover.png) 3px 50% no-repeat;
}

.navi_sub_item {
display:block;
margin: 1px 0px 0px 10%;
border:1px dashed #dddddd;
font-size: 0.7em;
padding: 1px;
padding-left:25px;
background: transparent url(../images/list-normal.png) 13px 50% no-repeat;
line-height: 1.25em;
vertical-align:middle;
outline: none;
cursor: pointer;
}

.navi_sub_item :hover {
background: transparent url(../images/list-hover.png) 13px 50% no-repeat;
}

und mein Html code:

<div class="designBox_out">
	<div class="designBox_in">
	<p class="navi_title">Navigation:</p>
	<ul class="navi_list">
		<li class="navi_sub_title">Basen:</li>
		<li>		
			<ul>
				<li class="navi_item"><a href="">Aktuelle Basis</a></li>
				<li class="navi_item"><a href="">Basen Liste</a></li>
				<li class="navi_item"><a href="">Bau-Men&uuml;</a></li>
				<li class="navi_item"><a href="">Einheiten-Men&uuml;</a></li>
				<li class="navi_item"><a href="">Forschung</a></li>			
				<li class="navi_item"><a href="">Karte</a></li>
			</ul>
		</li>
		<li class="navi_sub_title">User:</li>
		<li>
			<ul>
				<li class="navi_item"><a href="">Profil</a></li>
				<li class="navi_item"><a href="">Nachrichten</a></li>
			</ul>
		</li>
		<li class="navi_sub_title">Allianz:</li>
		<li>
			<ul>
				<li class="navi_item"><a href="">Allianz-Profil</a></li>
				<li>	
					<ul class="navi_sub_list">
						<li class="navi_sub_item"><a href="">Profil ansehen</a></li>
						<li class="navi_sub_item"><a href="">Profil bearbeiten</a></li>
					</ul>
				</li>
				<li class="navi_item"><a href="">Mitgliederliste</a></li>
				<li class="navi_item"><a href="">Verwaltung</a></li>
			</ul>
		</li>
		<li class="navi_sub_title">Allianz:</li>
		<li>
			<ul>
				<li class="navi_item"><a href="index.php?page=alliance_build">Allianz gründen</a></li>
			</ul>
		</li>
		<li class="navi_sub_title">Sonstiges:</li>
		<li>
			<ul>
				<li class="navi_item"><a href="">Forum</a></li>
				<li class="navi_item"><a href="">Allianzliste</a></li>
				<li class="navi_item"><a href="">Userliste</a></li>
				<li class="navi_item"><a href="">FAQ</a></li>
				<li class="navi_item"><a href="">Optionen</a></li>			
				<li class="navi_item"><a href="">ausloggen..</a></li>
			</ul>
		</li>
	</ul>		
	</div>
</div>

 

[Quaese]

Hi,

der IE hat ab und zu Probleme, die Dimensionen von Elementen darzustellen, wenn eine Höhenangabe fehlt.

Abhilfe schafft hier eine andere Eigenart des Microsoft-Produkts. Es wird eine minimale Höhe angegeben. Wird diese Höhe überschritten, wird das Element in seiner horizontalen Ausrichtung dennoch angepasst.

Füge mal vor der Klasse .navi_list li folgendes ein:

.navi_list,
.navi_list *{ height: auto !important;
              height: 1%;}

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[chaosente]

danke das hat geholfen