Abstand zwischen Grafiken in Liste (inline) definieren

[Benedikt Ernst]

Hallo!

Ich arbeite gerade an einer Seite, in der die Hauptnavigation horizontal aufgebaut ist. Die Formatierung der Navigation läuft über CSS per <ul> <li> etc., die Navigationspunkte sind Grafiken (kein Text!). Leider habe ich zwischen den Grafiken immer noch 3 oder 4 pixel Abstand. Wie bekomme ich die bündig aneinander gesetzt?

Der Code sieht momentan so aus:

CSS:
#nav {
 margin: 0px;
 padding: 0px;
 float:right;
}

ul#nav {
 margin: 0px;
 padding: 0px;
}

#nav li {
 display: inline;
 list-style-type: none;
 letter-spacing:0px;
 margin: 0px;
 padding: 0px;
}

HTML:
<ul id="nav">
<li><a href="#" ><img src="images/button1.gif"></a></li>
<li><a href="#" ><img src="images/button2.gif"></a></li>
<li><a href="#" ><img src="images/button3.gif"></a></li>
</ul>

[Auge]

Hallo

Leider habe ich zwischen den Grafiken immer noch 3 oder 4 pixel Abstand. Wie bekomme ich die bündig aneinander gesetzt?

#nav {
margin: 0px;
padding: 0px;
float:right;
}

ul#nav {
margin: 0px;
padding: 0px;
}

#nav und ul#nav bezeichnen beide das gleiche Element. Die Angaben zu margin und padding sind demnach doppelt gemoppelt.

#nav li {
display: inline;
list-style-type: none;
letter-spacing:0px;
margin: 0px;
padding: 0px;
}

HTML:
<ul id="nav">
<li><a href="#" ><img src="images/button1.gif"></a></li>
<li><a href="#" ><img src="images/button2.gif"></a></li>
<li><a href="#" ><img src="images/button3.gif"></a></li>
</ul>

Sowohl <a> als auch (wahrscheinlich eher) <img> können je nach Browsertyp eigene, von 0 abweichende, Angaben zu padding haben. Setze das padding für diese  Elemente mal explizit auf 0.

Tschö, Auge

[Benedikt Ernst]

Sowohl <a> als auch (wahrscheinlich eher) <img> können je nach Browsertyp eigene, von 0 abweichende, Angaben zu padding haben. Setze das padding für diese  Elemente mal explizit auf 0.

Tschö, Auge

Hallo Auge,

ist das padding für die elemente nicht auf 0 gesetzt über den padding-befehle bei #nav li??

[wahsaga]

hi,

Sowohl <a> als auch (wahrscheinlich eher) <img> können je nach Browsertyp eigene, von 0 abweichende, Angaben zu padding haben. Setze das padding für diese  Elemente mal explizit auf 0.

ist das padding für die elemente nicht auf 0 gesetzt über den padding-befehle bei #nav li??

padding
Inherited:   no

gruß,
wahsaga

[Auge]

Hallo

Sowohl <a> als auch (wahrscheinlich eher) <img> können je nach Browsertyp eigene, von 0 abweichende, Angaben zu padding haben. Setze das padding für diese  Elemente mal explizit auf 0.

ist das padding für die elemente nicht auf 0 gesetzt über den padding-befehle bei #nav li??

Wie wahsaga schon recht knapp verlauten ließ, werden die Werte für padding _nicht_ auf die Kindelemente vererbt. Alle Elemente (in diesem Fall) innerhalb von <li></li> haben demnach für ihre Eigenschaften die Ausgangswerte, außer ihnen wurde anderweitig bereits bestimmte Werte für die jeweiligen Eigenschaften mitgegeben.

Tschö, Auge