• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

IE list <li> und float Problem

bubu-der-uhu

bubu-der-uhu

New member
Ahoi meine Damen und Herren!

Bin bin fröhlichen Homepageprogrammieren auf ein Problem/IE-Bug gestossen:

Ich habe einen Text und darunter eine Aufzählung mit <ul> und <li> .
Links neben diese Liste möche Ich ein <img> setzen und zwar mach Ich das mit float: left;

FF zeigt das natürlich prima an und setzt die liste schön rechts neben das Bild (inkl. Margins&Co)
IE6 (die alte Sau) macht das natürlich nicht. Er ignoriert die Margins und Paddings womit die Liste an dem Bild klebt.

Wenn Ich display: inline für die <li> definiere, nimmt IE zwar die Margins an, aber die Liste ist dann in einer Linie und Ich hab kein List-style-element mehr.


Kennt wer nen Hack, Workaround oder ne Lösung die Darstellung dem IE auf zu zwängen?

kleines Bsp (nur mit div und list, aber selbes Problem) findet Ihr hier:
Unbenanntes Dokument

Dankeschön im Voraus, Bubu
 
Ob das jetzt ein Bug vom IE ist möchte ich mal dahin stellen. Denn wenn ich mir das margin für ul ansehe und es mit dem width vom div vergleiche ...

Code: 
<style>
#div
{
	background-color:#060;
	overflow: hidden;
	height: 200px;
	width: 100px;
	float: left;
}

ul
{
	list-style-position: inside;
	margin-left: 80px;
}

* html ul
{
	margin-left: 120px;
}
</style>

Code: 
<div id="div"> </div>

<ul>
	<li>Punkt1</li>
	<li>Punkt2</li>
	<li>Punkt3</li>
	<li>Punkt4</li>
</ul>
 
Zuletzt bearbeitet:
Danke René!
so funktionierts... das list-style-position: inside; kannte ich noch garnicht.

aber wenn Ich jetzt zum Bsp. ein Breiteres Bild hernehme mit width: 200px; dann klebt die Liste wieder am Bild. Der IE nimmt als margin referenz für listen also den umschließenden container und nicht das nächste Element neben Ihm?!

Ich komme also nicht herum das listen-margin für jedes nebenstehende Bild an zu passen.

Was Ich jetzt nicht checke:
Wieso macht der FF mit deiner Methode nun keinen größeren Abstand? Der misst doch vom nebenstehenden Element?!

Und: was macht das?
PHP: 
* html ul
{
	margin-left: 120px;
}

Danke, bubu
 
Code: 
ul
{
	list-style-position: inside;
	margin-left: 80px; /* für alle */
}

* html ul /* für den IE */
{
	margin-left: 120px;
}
 
Zuletzt bearbeitet:
schau mal den hier:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css">
#div
{
	background-color: #060;
	[color=red]margin-right: 20px;[/color]
	overflow: hidden;
	height: 200px;
	width: 100px;
	float: left;
}

ul
{
	list-style-position: inside;
}
</style>


</head>
<body>

<div id="div"> </div>

<ul>
	<li>Punkt1</li>
	<li>Punkt2</li>
	<li>Punkt3</li>
	<li>Punkt4</li>
</ul>

</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben