✔ Unsortierte Liste wird links im IE abgeschnitten

[Thomas D]

Hallo!

Ich habe eine unsortierte Liste (<ul>) mit folgender CSS-Angabe:

ul {margin-left: -24px;}

Im Opera und Firefox funktioniert alles wunderbar, nur im Internet Explorer werden mir die Zeichen links abgeschnitten. Zur besseren Veranschaulichung habe ich einen Screenshot upgeloadet: http://www.thomasd.info/temp/CSSFehler.jpg

Woran könnte das liegen und gibt es einen sinnvollen Workaround dafür?

MfG, Thomas D.

 

[Maik]

Hi,

setz mal anstelle der gezeigten Regel dieses Stylesheet für das Listenelement ein, damit die Listenpunkte linksbündig sitzen:

ul {
margin:0;
padding:0;
list-style-position:inside;
}

 

[Thomas D]

Hallo!

Zuerst einmal danke für deine Antwort ! Es funktioniert insofern, dass jetzt der Text im IE angezeigt wird. Leider funktioniert die Einrückung durch eine Margin-Angabe einer Minuszahl noch immer nicht, doch das wird wahrscheinlich ein "Bug" im IE sein. Im Firefox und im Opera wird die Liste schön angezeigt, im IE ist sie halt ein bisschen weiter rechts. Damit kann ich eigentlich leben. Sollte sonst jemanden noch eine Lösung für die "kleine Unschönheit" wissen, wäre ich natürlich erfreut, es zu hören. Allerdings bin ich mit dieser Lösung eigentlich eh schon zufrieden. Thx noch einmal ;-) ...

MfG, Thomas D.

 

[Maik]

Hi,

ich kenne jetzt nicht den vollständigen Quellcode (HTML + CSS) der Liste und ihrer "Umgebung", aber wenn du, wie von mir empfohlen, mit margin:0 und padding:0 die Polsterungseigenschaften des Listenelements auf null setzt, sind keine negativen margin-Werte mehr erforderlich, um die Listenpunkte nach links zu schieben.

Ansonsten solltest du den dazugehörigen Quelltext posten, damit man das Problem auch nachvollziehen kann.

 

[Thomas D]

Hallo!

Derzeit schaut die Ausgabe wie folgt aus: http://www.thomasd.info/temp/css.jpg

Der Code:

<div id="left">
	<div id="left_text">	
		<ul class="left">
<a href="index.php?content=news&objId=2"><li>Turmspringen in Wels</li></a>
<a href="index.php?content=news&objId=4"><li>Kickboxen in Pasching</li></a>
<a href="index.php?content=news&objId=5"><li>Schlitten fahren in Salzburg</li></a>
...			
	</ul></div>
...

Die CSS-Definitionen:

#left {
	position: absolute;
	width: 209px;
	height: 381px;
	text-align: center;
	top: 191px;
	left: 104px;
	background-image:url(../gif/left.gif);
}

#left_text {
	left: 20px;
	top: 40px;
	width: 150px;
	position: relative;
	text-align:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}

ul.left {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}

Wie gesagt, es ist nur eine Kleinigkeit. Firefox und Opera können's "schön", der IE nicht ...

 

[Maik]

Zunächst mal solltest du die Links innerhalb der Listenpunkte notieren, und nicht anders herum

<ul class="left">
    <li><a href="index.php?content=news&objId=2">Turmspringen in Wels</a></li>
    <li><a href="index.php?content=news&objId=4">Kickboxen in Pasching</a></li>
    <li><a href="index.php?content=news&objId=5">Schlitten fahren in Salzburg</a></li>
</ul>

Die Verschiebung im IE resultiert aus der text-align:center-Angabe für das DIV #left, die von Firefox und Opera "ignoriert" werden, da sie die darin enthaltenden Block-Elemente auf diese Weise nicht horizontal zentrieren.

 

[Thomas D]

Vielen Dank - es funktioniert ;-)! (Habe nun #left auf text-align:left eingestellt und <ul> auf margin-left: 0.4cm

Thx, Thomas D.