fehlerhafter abstand in liste mit grafiken (ie)

[Roger]

moin!

ich weiß echt nicht mehr weiter. der ie bringt mich noch zur weißglut.
ich habe ein menü mittels einer liste und darin enthaltener grafiken gemacht:

<ul class="lmenue">
 <li><a href="portrait.php"><img src="gfx/bt/portrait_b.gif" alt="Portrait" name="portrait" width="170" height="17" border="0" id="portrait" /></a></li>
 <li><a href="aktuell.php"><img src="gfx/bt/aktuell_b.gif" alt="Aktuell" name="aktuell" width="170" height="17" border="0" id="aktuell" /></a></li>
</ul>

für dieses menü exitieren folgende css-angaben:

ul.lmenue {
 padding: 0px;
 margin: 0px;
 width: 170px;
}

.lmenue li {
 list-style:none;
 margin: 0px;
 padding: 0px;
 height: 17px;
 width: 170px;
 margin-bottom: 4px;
 font-size:0px;
}

.lmenue li a {
 margin:0px;
 padding:0px;
}

die menübuttons sind rechteckig und sollen einfach untereinander angeordnet werden, mit einem abstand von 4px. der ie macht aber aus den 4px 7px! keine ahnung warum.
wenn ich stattdessen text als menüpunkt angebe, passen die abstände fast (5px).

selbst wenn ich margin-bottom: 4px weg lasse, wird immer noch ein abstand von 3px angegeben.

argh!

was läuft hier falsch?

gruß.
roger.

[Cheatah]

Hi,

der ie macht aber aus den 4px 7px! keine ahnung warum.

wegen der Whitespaces zwischen den <li>-Elementen. Eliminiere diese.

Cheatah

[Roger]

moin!

leider brachte das keinen erfolg (hab alles in eine zeiele geschrieben).

gruß.
roger.

[Cheatah]

Hi,

leider brachte das keinen erfolg (hab alles in eine zeiele geschrieben).

hm. Border der Images?

Cheatah

[Roger]

moin!

ist doch gleich null...
selbst wenn ich dafür ein extra style definiere bringt das nix...

gruß.
roger.

[Ingo Turski]

Hi,

probier mal display:block für die Bilder oder einen unsichtbaren Rahmen um die li.

freundliche Grüße
Ingo

[Roger]

moin!

probier mal display:block für die Bilder oder einen unsichtbaren Rahmen um die li.

also das mit den display:block brachte nix.

das mit dem rahmen verstehe ich nicht. wenn ich einen rahmen um die li setze, dann wird ja alles insgesamt um 2px breiter und nur die bilder werden eingerahmt. (ich habe das mal im o.g. beispiel gemacht (siehe url))
was ist dann ein unsichtbarer rahmen? :S

gruß.
roger.

[Ingo Turski]

Hi,

das mit dem rahmen verstehe ich nicht. wenn ich einen rahmen um die li setze, dann wird ja alles insgesamt um 2px breiter und nur die bilder werden eingerahmt. (ich habe das mal im o.g. beispiel gemacht (siehe url))
was ist dann ein unsichtbarer rahmen? :S

na... halt ein Rahmen in Hintergrundfarbe. Wenn sonst nix beim IE hilft, dann oft das; in Deinem Fall allerdings noch nicht ganz, so daß Du wohl nicht um eine gesonderte Angabe für den IE herum kommst.
Ich habe mal Dein CSS ergänzt (und einige unnötige Angaben rausgenommen):

body {  
  margin: 0; padding: 0;  
  background-color: #fff;  
}  
  
ul.lmenue {  
  color:white;  
  margin: 0; padding: 0;  
  width: 170px;  
  font-size:0;  /* white-space im IE */  
}  
  
.lmenue li {  
  display: block;  
  list-style:none;  
  margin: 0 0 4px 0; padding: 0;  
}  
* html .lmenue li {  
  margin:0;  
}  
.lmenue li a img {  
  display:block;  
  border: 0;  
}

Wieso gibst Du eigentlich zwei verschiedene Klassen für fast dieselben Formatierungen an? Eine Klasse und für die kleinen Unterschiede eine ID reicht doch völlig.

freundliche Grüße
Ingo

[Roger]

moin!

Wieso gibst Du eigentlich zwei verschiedene Klassen für fast dieselben Formatierungen an? Eine Klasse und für die kleinen Unterschiede eine ID reicht doch völlig.

weil das menü zum schluss noch etwas mehr können muss. (http://amt.maennchen1.de)

gruß.
roger.

[Ingo Turski]

Hi,

Wieso gibst Du eigentlich zwei verschiedene Klassen für fast dieselben Formatierungen an? Eine Klasse und für die kleinen Unterschiede eine ID reicht doch völlig.

weil das menü zum schluss noch etwas mehr können muss. (http://amt.maennchen1.de)

das beantwortet meine Frage nicht. Du hast die meisten Definitionen exakt gleich und nur wenige Abweichungen. Für diese reicht es wie gesagt, einer oder beiden UL eine ID zu geben. Eine Klasse ist doch dafür dar, gleichartige Elemente zu klassifizieren. Über die ID kannst Du dann spezielle Angaben oder abweichende definieren.

freundliche Grüße
Ingo

[Roger]

moin!

hier mal die testseite:
http://amt.maennchen1.de/test1.htm

gruß.
roger.

[MudGuard]

Hi,

leider brachte das keinen erfolg (hab alles in eine zeiele geschrieben).

vertical-align auf was anderes als baseline setzen.

cu,
Andreas

[Roger]

moin!

vertical-align auf was anderes als baseline setzen.

bei welchem element? dem img? hab ich testweise gemacht. erfolglos.

.lmenue li a img {
 vertical-align: top;
}

gruß.
roger.

[Roger]

moin!

Hi,

leider brachte das keinen erfolg (hab alles in eine zeiele geschrieben).

vertical-align auf was anderes als baseline setzen.

wow, halt! ich hab in .lmenu li jetzt mal vertical-align gesetzt und es brachte einen erfolg! zumindest einen 2px-erfolg, denn nun ist der abstand nur noch 5px (statt gewünschter 4px).

gruß.
roger.