CSS: Padding unterschiedlich in IE / Mozilla

[michael.sprick]

Hallo,

ich habe hier ein Problem mit dem padding bei einer Linkliste...
Das Menü teilt sich auf in Kategorien, Items und SubItems.
Damit eine Hierarchie erkennbar ist, möchte ich gerne entsprechend einrücken. Das mache ich über padding... Im IE funktioniert das, im Mozilla allerdings leider nicht. Dort wird der TExt zwar ausgerichtet, aber die Box auch gleichzeitig um das Padding verbreitert... das ist blöd Andere Browser habe ich noch nicht getestet. Im Anhang habe ich mal ein paar Screenshots angehängt damit ihr seht, was ich meine. Links ist jeweils der IE in einer VMware und rechts ist Mozilla/Linux...

Das HTML sieht so aus:

<div id="linkList"> 
      <ul>
        <li class="headline">Kategorie 1</li>
        <li><a href="#" >Item 1</a></li>
        <li><a href="#" >Item 2</a></li>
        <li><a href="#" >Item 3</a></li>
        <li class="subitem"><a href="#" >SubItem 1</a></li>
        <li class="subitem"><a href="#" >SubItem 2</a></li>
        <li class="subitem"><a href="#" >SubItem 3</a></li>
        <li><a href="#" >Item 4</a></li>
        <li><a href="#" >Item 5</a></li>
        <li><a href="#" >Item 6</a></li>
        <li><a href="#" >Item 7</a></li>
        <li class="headline">Kategorie 2</li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#" >Item 3</a></li>
      </ul>
</div>

Das CSS ist so definiert:

#linklist                { display: block; margin: 0px; width: 150px; position: absolute; top: 170px; left: 20px; /* clip: rect(0px 150px auto 0px); */}
#linklist ul li.headline { display: block; margin: 0px;  width: 150px; padding: 2px 0px 2px  5px;  border-bottom: 1px solid #0A0A0A;  text-decoration: none; background: #D0D0D0; color: #0A0A0A;  text-transform: UPPERCASE; font-weight: bold;}
#linklist ul li a        { display: block; margin: 0px;  width: 150px; padding: 2px 0px 2px 10px;  border-bottom: 1px solid #D0D0D0;  text-decoration: none; background: #2B497B; color: #F2F2F2;  text-transform: UPPERCASE;}
#linklist ul li.subitem a{ display: block; margin: 0px;  width: 150px; padding: 2px 0px 2px 15px;  border-bottom: 1px solid #7A7A7A;  text-decoration: none; background: #ADC1E1; color: #0A0A0A;  text-transform: UPPERCASE;}

Als Workaround habe ich im #linklist-Layer ein Clipping gesetzt (s. o -> auskommentiert) , das einfach die Überstände abschneidet. Aber das ist keine saubere Lösung. Hat jemand eine Idee, wie ich das Problem beheben kann?

Gruß, Michael

[nEox]

weise dem li-Tag die Breite zu und entferne die Breitenangabe bei den restlichen Angaben(ul li.headline, ul li a usw...)

#linklist ul li
{ display: block; margin: 0px; width: 150px; }
brei den Restlichen nicht!

Gruß

nEox

[michael.sprick]

vielen Dank - ich werd das nachher mal probieren.

Michael

[Reaper]

Zum einfachen einrücken eines textes gibt es text-indent also wen ndu nur linksseitig einrücken willst

Ich glaub übrigens eher, daß der IE hier etwas falsch darstellt...

[sagi]

Ich glaub übrigens eher, daß der IE hier etwas falsch darstellt...

Ja.

Der IE berechnet die Breite falsch:

http://css4you.de/wsboxmodell/index.html#browser

[Reaper]

Ja.

Der IE berechnet die Breite falsch:

http://css4you.de/wsboxmodell/index.html#browser

Genau den Link dazu hatte ich gesucht und nicht mehr gefunden, danke schön

[michael.sprick]

Ah - super Sache. Das gefällt mir noch besser als das padding... Besten Dank.

Jetzt habe ich allerdings gleich noch eine Frage.
Existiert eine Möglichkeit, den Text horizontal zu zentrieren?

Grundsätzlich hat ein Listitem jetzt diese Styleangaben:

#linklist ul li a       
{ 
  display: block; 
  margin:  0px;  
  width:   150px; 
  height:  25px;
  text-indent:     10px; 
  border-bottom:   1px solid #D0D0D0;  
  text-decoration: none;  
  background: #FFFFFF url(img/sub1item.gif) no-repeat 15px 50%; 
  color:      #000066;  
  text-transform: UPPERCASE;
}

Ich habe es mit vertical-align: middle versucht. Aber das hatte weder im IE noch im NS einen Effekt. Leider habe ich bei Selfhtml auch nix vergleichbares gefunden...kann es sein, dass das in einem Listenelement nicht funktioniert?

Danke, michael

[jeebee]

schau dich mal auf http://www.css4you.de/index.html um, dort findest du eventuell noch etwas.

[michael.sprick]

Danke für den Link - der ist echt gut.

Also den Text kann man scheinbar nur in inline Elementen und in Elementen, die mit "display: table-cell" formatiert wurden, vertikal mittig ausrichten. Dadurch bekomme ich dann aber wieder andere Probleme die wieder Browserabhängig sind.
Außerdem habe ich festgestellt, dass diese Art Navigationsmenü (in diesem Fall) ungeschickt ist.
Denn falls ein User eine Mindestschriftgröße im Browser eingestellt hat vergrößern sich nicht die ListItem Boxen, sondern der Text überlagert sich einfach nur und man kann ihn nicht mehr lesen.
Vermutlich werde ich doch wieder Tabellen für die Navigation benutzen...schade.

Trotzdem, vielen Dank für Eure Hilfe

[jeebee]

wenn dir die mühe nicht zu gross ist, kannst du auch für verschiedene Browser verschiedene stylesheets erstellen. finde aber gerade die anleitung wie du die browsererkennung realisieren kannst nicht. das würde bei den browserabhängigen problemen helfen.