CSS bei <ul><li> im IM FF und IE identisch

[KarlKoks]

Guten Morgen.
Ich verwende in einem div ein "Auflistung" .. ungefähr so..

<div id="global_menue_mitte">
<ul>
<li><a href="">Punkt a</a></li>
<li><a href="">Punkt b</a></li>
<li><a href="">Punkt c</a></li>
</ul>
</div> 

das ganze soll optisch ein Menü ergeben wo die Links nebeneinander aufgelistet werden, funktioniert auch soweit. Ist mit CSS formatiert.

Der Tag <UL> zieht sich über die gesamte breite des divs.
Der unterschied ist nun das IM FF ein automatischer abstand zum <UL> von links ca 40 px eingesetzt wird, somit quasi der Text versetzt wird wie im Befehl <blockquote>. Im IE ist dieses nicht der Fall und die Menüpunkte beginnen direkt ganz links.

Gibt es eine Möglichkeit dieses Einheitlich zu gestalten?

Zur formatierung verwende ich folgenden CSS-Code:

#global_menue_mitte {
margin:0 auto;
padding-top:5px;
padding-bottom:5px;
border:1px solid #646464;
border-top:0px;
width:800px;
position:relative;
background-color:#FFFFFF;
background-image:url(grafiken/hintergrund_body.jpg);
}

#global_menue_mitte ul {
margin:0px;
list-style:none;
border:1px solid red;
}

#global_menue_mitte ul li{
display: inline;
}

#global_menue_mitte li {
border:0px solid #000000;
background-image:url(grafiken/punkt_1.jpg);
background-repeat:no-repeat;
padding-left:10px;
margin-left:13px;
margin-right:13px;
}

#global_menue_mitte li:hover {
border-bottom:0px solid #000000;
background-image:url(grafiken/punkt_2.jpg);
background-repeat:no-repeat;
} 

Ich würde mich freuen wenn Ihr mir helfen könntet.
Gruß

[Kropff]

Setzt erst mal alle Abstände auf 0. Das wirkt oft wahre Wunder:

* { margin: 0; padding: 0} 

Peter

[unset]

Generell würde ich zu einem reset-Stylesheet raten. Das verhindert das Dinge, die in zwei oder drei Browsern gleich dargestellt werden, im vierten völlig anders aussehen und ggf. das Layout verhunzen. Einfach mal nach "reset stylesheet" googlen.

[KarlKoks]

ja.. ich hatte ein padding nicht bedacht.. hätt ich auch selbst drauf kommen können, naja.. Vielen Dank für die schnelle Hilfe..

[Jester_Prince]

Wie Meister Kropff schon erwähnt hat, setz erst einmal alle Abstände auf 0. Dazu bedienst Du Dich einfach des Universalselektors "*" (natürlich ohne Anführungsstriche).

 * {
  margin : 0;
  padding 0;
}

Dadurch werden (fast, denn ich glaube, z.B. das vermaledeite "textarea" spielt da nicht mit) alle Abstände entfernt und die in jedem Browser verschiedenen Abstände für Listen, usw. sind zunächst einmal einheitlich.

Auf diese Weise musst Du zwar die Abstände selbst wählen, hast aber mehr Kontrolle, und die Wahrscheinlichkeit, dass Du über den IE musst, wird auch etwas verringert.

Wenn Du öfter mit CSS arbeitest, würde ich Dir weiterhin empfehlen, eine Art Grund-Stylesheet anzulegen, in dem Du oben genannten Code und eine Reihe weiterer Grundeinstellungen, die sich aus Deiner Arbeitsweise ergeben (haben) verarbeitest. Das spart eine Menge Zeit, Ärger und lässt sich mit zunehmender Erfahrung erweitern und immer mehr Deinen Bedürfnissen und Deiner Arbeitstechnik anpassen.

[KarlKoks]

Hey, Super, danke für deine Antwort.. Is nen guter Tipp..
Vielen Dank.