✔ Liste formatieren in IE und mozilla

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo Leute,

ich habe eine Liste versucht zu formatieren aber festegestellt das der Ie und MOzilaa Browser die Liste anders darstellen. Im IE sind die square Punkte der Liste kleiner als im IE und die Abstände der aufgelisteten Sätze haben dadurch auch einen größeren Absatnd.

Wie bekommt man eine einheitliche Formatierung hin?

CSS
PHP: 
#navcontainertwo { width: 200px; }
#navcontainertwo ul
{
margin-left: 20px;
padding:0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
#navlisttwo li { list-style-type: square; }

HTML
PHP: 
<div id="navcontainertwo">
<ul id="navlisttwo">
<li>gggggggggggggggggg</li>
<li>ggggggggggggggggggg</li>
<li>gggggggggggggggggggg</li>
<li>ggggggggggggggggggggg</li>
<li>ggggggggggggggggg</li>
</ul></div>
 
Hi;

wie wäre es z.B. so->

Code: 
#navcontainertwo{
	width: 200px;
	font-size:10px;
	}
#navcontainertwo ul{
	margin-left:20px;
	padding:0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	}
#navlisttwo li{
	list-style-type: square;
	line-height:9px;
	height:10px; 
	}

Greetz
 
Hallo,

dank dir ein guter Lösungansatz mit dem line-height:9px; Attribut, aber in deinem Beispiel hast du noch im li Tag height 10px formatiert was nicht richtig funktioniert besser ist wen man es weckläst damit der IE und der mozilla gleiche Höhen haben. Ansonsten sind die Abstände zwischen den Zeilen doch etwas größer im IE Browser.

PHP: 
#navcontainertwo{
width: 200px;
font-size:10px;
}
#navcontainertwo ul{
margin-left:20px;
padding:0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navlisttwo li{
list-style-type: square;
line-height:9px;
}

gruß
feh
 
Zuletzt bearbeitet:
Hallo!

Versuch es doch mal so.
Die Grafik 6px.gif ist 6x6 Pixel gross und hat einen 1 Pixel breiten weissen bzw. transparenten Rand.
HTML: 
<html>
<head>
<title></title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
#navcontainertwo{
width: 200px;
font-size:10px;
}
#navcontainertwo ul{
margin-left:20px;
padding:0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navlisttwo li{
list-style-type: none;
}
img{
height:6px;
}
</style>
</head>
<body>
<div id="navcontainertwo">
<ul id="navlisttwo">
<li><img src="6px.gif"> gggggggggg</li>
<li><img src="6px.gif"> gggggggggg</li>
<li><img src="6px.gif"> HHHHHHHHHH</li>
<li><img src="6px.gif"> HHHHHHHHHH</li>
<li><img src="6px.gif"> oooooooooo</li>
<li><img src="6px.gif"> oooooooooo</li>
<li><img src="6px.gif"> HHHHHHHHHH</li>
</ul>
</div> 
</body>
</html>
Gruss Dr Dau
 
Ich dachte, dass es dir darum geht eine Lösung zu finden, die die Liste in beiden Browsern möglichst ähnlich aussehen lässt.

feh hat gesagt.:
Wie bekommt man eine einheitliche Formatierung hin?
Zum Vergrößern anklicken....

Bei deiner "verbesserten" Lösung ist der Unterschied jedoch wieder größer als bei mir (besonders die Abstände zwischen den einzelnen Punkten) :confused:

Greetz
 
Dass die Listenelement-Zeichen unterschiedlich groß dargestellt werden, liegt an der Schriftgröße des jeweiligen Elements.
 
Das Ergebnis mit list-style-image sieht aber katastrophal aus.
Da die richtigen Masse für die Grafik zu finden damit sie auch in Zeilenhöhe ist und nicht eher am oberen Zeilenrand, dürfte eine schöne Fummelarbeit werden.
 
Hallo T3ch,

also wie gesagt, deine Lösung war schon ganz gut, vielen Dank. Aber wenn man im CSS Code bei li den Wert height 10px weckläst, dann verkleinert sich der Absatnd der Reihen nach oben und unten ein wenig und es sieht in allen Browsern gleich aus.

Wenn man aber den Wert height 10px stehen läst, dann ist der Abstand etwas höher im IE als in den anderen und es sieht nicht mehr gleich aus. :suspekt: ;)

Alter Code von dir:

PHP: 
#navcontainertwo{
	width: 200px;
	font-size:10px;
	}
#navcontainertwo ul{
	margin-left:20px;
	padding:0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	}
#navlisttwo li{
	list-style-type: square;
	line-height:9px;
	height:10px; 
	}


Neuer Code wie es besser wäre:
PHP: 
#navcontainertwo{
	width: 200px;
	font-size:10px;
	}
#navcontainertwo ul{
	margin-left:20px;
	padding:0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	}
#navlisttwo li{
	list-style-type: square;
	line-height:9px;
 }

Ich denke das kann man so verstehen was ich meine. Warum es so ist weis nur der Mann im Mond.

viele Grüße an alle.
feh
 
Ja, das stimmt.
Vielleicht hilft dir dieser Code ja auch noch ein bisschen weiter->

Code: 
#navcontainertwo{
    width: 200px;
    font-size:10pt;
    }
#navcontainertwo ul{
    margin-left:20px;
    padding:0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    }
#navlisttwo li{
    list-style-type: square;
    line-height:12px;
}
* html #navlisttwo li {
    line-height:13px;
}

Greetz
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück