CSS Darstellungsproblem IE - Navigation mit <ul>

Beitrag von **imothop** » 23.07.2006, 17:47

Hi Zusammen,

ich bin mal wieder den Tränen nah, weil mich der IE in den Wahnsinn treibt. Kaum hat man ein Darstellungsproblem gelöst, kommt schon das nächste und hier ist mein Aktuelles.

Ich möchte ein ganz normale vertikale Navigationsleiste mit CSS erstellen, auf Basis der Listenfunktion UL und LI, mit Hover und Button Effekt.

Im Firefox klappt die Darstellung wunderbar, nur im IE gibt es ein Problem, sobald ich eine Überschrift mit H2 in die Navi einbette. Der IE zeigt mir dann beim ersten Listeneintrag unter der Überschrift einen Pixelabstand an und ich habe keine Ahnung, wo der herkommt.

Ich füge mal 2 Bilder ein, damit man sehen kann, wo genau das Problem liegt.

Das erste Bild zeigt den ganz normalen Hovereffekt und auch im IE werden die Abstände zwischen den Listeneinträgen richtig angezeigt.

Bild entfernt

Das zweite Bild zeigt das Problem und zwar den Pixelabstand zwischen der Überschrift und dem ersten Listeneintrag.

Bild entfernt

Das problm tritt nur im IE auf, im Firefox ist der Pixelabstand nicht vorhanden.

Ich suche nun schon seit einer Stunde nach dem Fehler und kann ihn einfach nicht finden. Ich poste jetzt einfach mal den entsprechenden CSS Code, vielleicht kann ja jemand von euch auf den ersten Blick den fehler entdecken, ich sehe mittlerweile echt nüscht mehr

Code: Alles auswählen

ul#Navigation &#123;
    width&#58; 150px;
    margin-top&#58; 0px;
    margin-bottom&#58; 0px;
    margin-left&#58; 0px;
    margin-right&#58; 0px; 
    padding-top&#58; 0px;
    padding-bottom&#58; 0px;
    padding-left&#58; 0px;
    padding-right&#58; 0px;
    border-width&#58; 1px 1px 0px 1px;
    border-style&#58; solid;
    border-color&#58; #36901E;
    background-color&#58; #FFFFFF;
  &#125;
  
  /* star html hack fuer IE */        
  * html ul#Navigation &#123;  /* Korrekturen fuer IE 5.x */
    width&#58; 152px;
   &#125;
  
  ul#Navigation li &#123;
    list-style&#58; none;
    margin-top&#58; 0px;
    margin-bottom&#58; 0px;
    margin-left&#58; 0px;
    margin-right&#58; 0px;
    padding-top&#58; 0px;
    padding-bottom&#58; 0px;
    padding-left&#58; 0px;
    padding-right&#58; 0px;
  &#125;

  ul#Navigation a &#123;
    display&#58;block;
    padding-left&#58; 8px; 
    padding-top&#58; 3px; 
    padding-bottom&#58; 3px; 
    text-decoration&#58; none; font-weight&#58; bold;
    border-width&#58; 0px 0px 1px 0px;
    border-style&#58; solid;
    border-color&#58; #36901E;
    color&#58; #000000; background-color&#58; #FFFFFF;
  &#125;
  
    /* star html hack fuer IE */  
  * html ul#Navigation a &#123;  /* Breitenangaben nur fuer IE */
    width&#58; 150px;
  &#125;
  
  ul#Navigation a&#58;hover &#123;
    background&#58; #ABD69B; 
    color&#58; #FFFFFF;
    font-weight&#58; bold;
    margin-top&#58; 0px;
  &#125; 
  
      /* star html hack fuer IE */  
  * html ul#Navigation a&#58;hover &#123;  /* Breitenangaben nur fuer IE */
    width&#58; 150px;
  &#125;
    
ul#Navigation h2 &#123;
    font-size&#58; 13px;
    color&#58; #FFFFFF;
    font-weight&#58; bold;
    font-family&#58; Arial, Helvetica, sans-serif; 
    text-align&#58; right;
    border-width&#58; 0px 0px 0px 0px;
    background-color&#58; #36901E;
    display&#58;block;
    padding-top&#58; 3px;
    padding-bottom&#58; 3px;
    padding-right&#58; 10px;
    margin-top&#58; 0px;
    margin-bottom&#58; 0px;
    margin-left&#58; 0px;
    margin-right&#58; 0px;
  &#125;

      /* star html hack fuer IE */    
* html ul#Navigation h2 &#123;  /* Breitenangaben nur fuer IE */
    width&#58; 150px;
  &#125;

Ich sag schonmal tausend Dank an alle, die mal einen Blick drauf werfen.

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **Liesl_Weppen** » 23.07.2006, 19:12

Hi,

das IE-Problem liegt an der Interpretation
der Überschriften (H). Wird anstelle des h2 eine
Klasse notiert:

<li class="h2"

funktionierts.

Damit es auch mit den Überschriften funktioniert,
im ul#Navigation h2 margin-bottom: -1px notieren (anstatt 0).

Beitrag von **ole1210** » 23.07.2006, 19:18

Bei mir gibt es keine Probleme. Wird im IE und im FF richtig dargestellt.

Frag doch mal auf www.css4you.de. Evtl haben die noch nen Hinweis für dich.

von **Anzeige von ABAKUS** »

Beitrag von **imothop** » 23.07.2006, 19:18

@Liesl_Weppen

Ich könnte dich gerade Küssen

Nun klappt es endlich.

Herzlichen Dank für deine Hilfe. Und dir auch danke ole1210 fürs rüberschauen und den Tip mit css4you (kannte ich noch nicht und scheint sehr gut zu sein).

Beitrag von **ole1210** » 23.07.2006, 19:53

Warum <li class"h2"...

Mach doch einfach:

<ul id="Navigation">
<h2>Überschrift</h2>
<li><a href="">Eins</a></li>
<li><a href="">Zwei</a></li>
<li><a href="">Drei</a></li>
</ul>

Und fertig! Da brauchst du auch keine negativen Angaben machen!

Beitrag von **MonikaTS** » 23.07.2006, 21:39

es gibt auch absolut keine Probleme , wenn man statt px em als Angabe nimmt;
sowohl bei der Schriftgröße wie bei den padding , margin Werten und bei line-height

es wird gemunkelt dass der IE7 den Star Hack richtig übersetzt,
wenn dem so ist, wird das Design crashen
lg

Beitrag von **imothop** » 24.07.2006, 00:12

@ole1210

ich bin mir nicht sicher, ob das Valide ist, wenn man einfach einen h2 Tag zwischen ul und li setzt. Zudem nutze ich das H2 bereits für den normalen Text Content und müsste für den Text Content dann eine neue H2 Klasse einsetzen. Da ist Liesl_Weppen Lösung in dem Fall für mich bequemer.

@einfach

PX habe ich bisher immer aus reiner Faulheit benutzt, weil ich mit Pixelwerten weitaus vertrauter bin als mit em. Da wüsste ich gerade garnicht wie ich das umrechnen sollte

Dein Hinweis bezüglich IE 7 und Star Hack macht mich schon wieder fertig

Gibt es den eine sinvolle Alternative die Darstellungsfehler im IE zu umgehen? Ich möchte ungern in ein paar Wochen das Design überarbeiten.

Beitrag von **MonikaTS** » 24.07.2006, 05:54

imothop bei em
rechnest Du gar nict,
Du *relativierst*

body{font-size:101%}
oder body{unter 100%} =>wegen der Mozilla Browser,

brauchst Du jetzt bei diesem ul kleinere Schrift ist die Angabe in Relation zu der obigen,

ul.navigation{font-size:0.8em;}
bedeutet ~ 80% von den 101% des bodys
ul.navigation li {font-size:0.8em;}
bedeutet ~ 80% von den 100% des ul =>sehr klein

und sowohl 100% wie 1em sind die 100% der Schriftgröße, die der User in seinem Browser eingestellt hat

mit % oder em Angaben erkennt man als WebDesigner,Webmaster an, dass es hunderte Schriftgrößen, Seheinschränkungen (Brillenträger) etc gibt und im Internet alles 'fließt'

und man umgeht Hacks

zum Hack kann ich Dir nur was sagen, wenn ich den Grundaufbau kenne
lg

Beitrag von **imothop** » 24.07.2006, 09:28

@einfach

Danke für die nette Erklärung, ich hatte mir bis dato unter em immer nur eine weitere absolute Maßeinheit vorgestellt, ähnlich wie px.

Ich habe bisher immer recht starre Layouts für meine Projekte entworfen und befasse mich bei meinem neuen Projekt eigentlich das erste Mal mit dem Versuch, ein barrierefreies Layout zu erstellen. Ich hatte große Schwierigkeiten mit CSS bis ich endlich "Float" verstanden habe und gesehen habe, dass ich mit Float die Freiheit habe auch gestalterisch tätig zu sein. Ich habe viel mit Tabellen als Layout-Mittel gearbeitet und hätte nicht gedacht das in CSS genug Power steckt, um Tabellen Layouts gleichwertig oder sogar noch besser zu ersetzen. Aber Dank Float bekomme ich nun endlich tabellenlose Layouts hin und das war der erste Schritt.

Je mehr ich mich mit barrierefreien Layouts befasse, umso besser gefällt mir das. Das führt einem zurück zu den eigentlichen Bestimmungen von Funktionen und ich mag die Klarheit, die durch barrierefreie Layouts entsteht.

Ich mag auch den Gedanken Webseiten zu erstellen, die sich den individuellen Bedürfnissen der Besucher anpassen.

Ich glaube ich lege mein jetziges Layout mal kurz zur Seite und beschäftige mich erstmal etwas eingehender mit em. Die Verwendung wäre auf jeden Fall sinnvoller, als weiter mit starren Pixelwerten zu arbeiten. Man könnte auch sagen, nun bin ich Heiß auf em

Danke nochmals für den Denkanstoß.

Beitrag von **luigip** » 24.07.2006, 13:48

imothop hat geschrieben:@ole1210

ich bin mir nicht sicher, ob das Valide ist, wenn man einfach einen h2 Tag zwischen ul und li setzt.

Ist nicht valide!

imothop hat geschrieben:Zudem nutze ich das H2 bereits für den normalen Text Content und müsste für den Text Content dann eine neue H2 Klasse einsetzen. Da ist Liesl_Weppen Lösung in dem Fall für mich bequemer.

Wer glaubt, mit einer Klasse namens "H2" tatsächlich eine logische Auszeichnung (Überschrift) zu generieren, hat das Ganze nicht richtig verstanden. Mit Klassen werden lediglich physische Auszeichnungen vorgenommen bzw. überschrieben.

imothop hat geschrieben:PX habe ich bisher immer aus reiner Faulheit benutzt, weil ich mit Pixelwerten weitaus vertrauter bin als mit em. Da wüsste ich gerade garnicht wie ich das umrechnen sollte

Da gibt es nichts umzurechnen, weil du mit em relative Größen hast. Die sind dann von den (notwendigen) Schriftgößeneinstellungen des Nutzers abhängig. Denk mal über die damit verbundene Nutzerfreundlichkeit nach.

imothop hat geschrieben:Dein Hinweis bezüglich IE 7 und Star Hack macht mich schon wieder fertig Gibt es den eine sinvolle Alternative die Darstellungsfehler im IE zu umgehen? Ich möchte ungern in ein paar Wochen das Design überarbeiten.

Wenn du ein kluges Design hast, braucht es keine Hacks.

Beitrag von **phereia** » 24.07.2006, 20:36

luigip hat geschrieben:Wenn du ein kluges Design hast, braucht es keine Hacks.

Der IE schafft es mit seinen Bugs, auch das "klügste" Design kaputtzubekommen.