CSS Problem mit dem Abstand von Listenelementen im IE7

[Mr. Snoot]

Hio,

ich habe im IE7 ein Problem mit dem Abstand von Listenelementen.

Aussehen sollte es so:

​

Im IE7 sieht es so aus:

​

Früher hat das definitiv mal korrekt funktioniert und ich weiß leider nicht, mit welcher Änderung sich das Problem eingeschlichen hat (kann mich eigentlich auch nicht entsinnnen, am Menü überhaupt mal was geändert zu haben).

Das Stylesheet findet sich hier (/* Hauptnavigation (links) */), die Seite hier.

Hat jemand eine Idee, wo man da schrauben muss? Hab mich in den IE-Entwicklertools schon zu Tode gesucht.

 

[florian662]

Ich weis man könnte dir bestimmt auch eine bessere Antwort geben. Aber versuchs doch mal mit IE8 anstatt mit dem alten IE7.

 

[Mr. Snoot]

Geht ja um die Benutzer des IE7.

 

[Hevock]

Hi
Wird das bei dir nur so dargestellt oder betreibst du auch die Webseite.
Falls du der Betreiber bist solltest du mal hier nachlesen hatte auf meiner Webseite ähnliche Probleme.

http://msdn.microsoft.com/de-de/library/cc817570.aspx

Ansonsten mal mit IE8 oder einen ganz anderen Browser versuchen.
Gruß Hevock

 

[Mr. Snoot]

Is meine Seite.

Das Problem ist, dass ich nicht weiß, welche Stelle im Code ich ändern müsste. Sollte doch irgendein margin oder padding sein. Oder kann ich den IE7 zwingen den Code wie im IE6 zu rendern? Der stellt es nämlich korrekt dar.

Den IE8 kann man ja bspw. via Metatag "zum IE7 machen".

 

[ScoutX]

Leute, statt Sarkasmus auch helfen.
Problem ist im main.css ab Zeile 247 dein Padding 2 px.
Versuch es mal mit em statt px oder schmeiß das Padding ganz raus.

Edit:das Problem sitzt leider tiefer. Wie immer bei Listen; hat man ein Problem, hat man noch ein Problem mehr. Ändere nicht auf em, da Du ansonsten dein nicht gerade günstig referenziertes Hintergrundbild auf die anderen Elemente überträgst.

Ich guck noch mal, werde ein Update geben.

 

[Mr. Snoot]

Das hilft leider nicht; hab schon alle paddings und margins durchprobiert. Müsste ja eigentlich ein margin sein.

 

[Stefan-]

Das könnte auch ein Zeilenabstand sein. IE hat ja manchmal Schwierigkeiten bei der korrekten Verarbeitung von Whitespace. Setz doch mal für das ul-Element die Zeilenhöhe auf 0 und für die li-Elemente auf den eigentlichen Wert. Möglicherweise behebt das schon dein Problem.

Ansonsten: Separates CSS-File für IE, mit Conditional Comments einbinden und für die li-Elemente margin-bottom=0-.

 

[DerEineDa]

Vielleicht solltest du das margin lieber für das <li> definieren, anstatt für das <a> da drin.

 

[ScoutX]

Doch, es ist genau dass margin, was ich beschrieben habe. Das Problem an der Geschichte ist eben dein Hintergrundbild. Das wird anderes verarbeitet im IE7. Dein Hintergrundbild ist eim Z-index hinter dem grau. Das Bild selbst ist zu groß für eine Zeile.

Versuch folgendes: Es beginnt ab #navlist a { im main.css . Sollte ab Zeile 241 sein.
Füge hier ein Border: 2px solid; ein.
Sollte ie7 und FF nun ein identisches Bild liefern wechsle solid mit "none".

Ich bin im Moment nicht am Rechner mit meinen virtuellen Maschinen. Ich kann den IE7 deswegen nicht austesten.

Ansonsten Stefans Vorschlag.

 

[Mr. Snoot]

Also mit einem separaten CSS hätte ich es so fast geschafft:

#navlist a
{
  margin:0px 1px -1px 1px; // original: margin:1px;
}

#subnavlist a
{
  margin:-1px 1px; // original: margin:1px;
}

Nur beim letzten li-Element müssten es beim unteren Abstand 0px statt -1px sein:

#navlist a
{
  margin:0px 1px 0px 1px;
}

​

Gibt's nicht irgendwie die Möglichkeit mit li:last-child oder so nur das letzte li-Element anzusprechen?



Das margin für li zu definieren anstatt für a hab ich mir auch schon überlegt; hat aber auf die Schnelle nicht das gewünschte Ergebnis geliefert.



edit: okay, ein zusätzlicher Abstand beim umgebenden Container hat geholfen:

#navcontainer
{
  padding-bottom:1px; // original: padding:0;
}

Danke für die Hilfe Frage mich echt, wie das früher funktioniert hat, denn da habe ich sicher nicht so einen Spagat gemacht.

 

[ScoutX]

http://www.intensivstation.ch/css/tips/list-columns/
Bitte ab

Leider kann der IE damit nichts anfangen, er verdoppelt den Abstand zwischen den List-Elementen.

Wenn Du es unbedingt so machen willst. Zudem hast Du immernoch das Problem mit dem Hintergrund.

Dein -1 px margin ist ein rechtes Gemauschel. Damit hast Du den FF indirekt überlistet, da er das ganze nicht mehr verkleinern konnte, der IE schon.

 

[mysterytime]

Dein PSE ist falsch

Das 67 Element hat nicht nur einen falschen Kürzel (Ti statt Tl) sondern auch eine falsche Ordnungszahl, es besitzt die Ordnungszahl 81.

Ich weiß nicht ob das so gewünscht war/ist.

Sorry für dieses "Off-Topic" Thema

 

[ScoutX]

Zum Offtopic, das gesamte Periodensystem braucht ein Refresh. Alle Elemente ab den Actinoiden haben ein Falsches Hover bzw. eine falsche Elementnummer. Die IUPAC ist sich zumindest beim Copernicium einig bei der Namensgebung.

 

[Mr. Snoot]

Dein -1 px margin ist ein rechtes Gemauschel. Damit hast Du den FF indirekt überlistet, da er das ganze nicht mehr verkleinern konnte, der IE schon.

Für den IE7 ist mir das nahezu egal - Hauptsache die Abstände passen



Das PSE muss ich mir mal anschauen, danke.