Über mich

Startseite arrow Tipps & Tricks arrow Zeilenumbrüche und Tabs im HTML-Code

Zeilenumbrüche und Tabs im HTML-Code
Mittwoch, 4. Juni 2008
Geschrieben von Armin Vieweg
Viele benutzen Einrückungen um den Quellcode übersichtlich zu halten. Der Internet Explorer 6 jedoch interpretiert diese Einrückungen und Zeilenumbrüche teilweise.

Hat man zum Beispiel eine Navigation innerhalb eines 200 Pixel breiten DIV, die auf einer ungeordnete Auflistung (ul) basiert könnte der Quellcode so aussehen:

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>


In einer vertikalen Navigation macht man die Links meistens so breit wie der verfügbare Platz, sprich man gibt den Links ein display:block.

Im Firefox und im Internet Explorer 7 sieht alles wunderbar aus, so wie es sein soll, doch im IE6 wird unter jedem Menüpunkt ein dicker Abstand eingebaut.

Der Abstand ist so groß, wie im Firefox ein Abstand, wenn man ein Break (br) hinter den Link packen würde.



Lösung 1: Einrückungen und Umbrüche entfernen
Eine Möglichkeit dieses Problem im IE6 zu beheben ist das Entfernen aller Zeilenumbrüche und Tabs im Quellcode. Das sähe dann so aus:

<ul><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul>


Nicht so übersichtlich, oder?


Lösung 2: Eine Zeile CSS und das HTML bleibt sauber
Im CSS, dort wo der Link definiert wurde einfach eine feste Breite dazu schreiben und schon ist der Fehler für den Internet Explorer behoben.

ul li a {
  display:block;
  width:200px;
}


Als feste Breite empfehle ich die Breite zu nehmen, die das Objekt durch die Vererbung des darüber liegenden Objektes eh erhalten hätte. Da das DIV darüber in unserem Beispiel 200 Pixel breit ist, nehmen wir auch diese Breite für die Links.



Ich hatte diesen Effekt auch mal. Um den Quellcode einer Website unleserlich zu machen habe ich alle Tabs (\t) und Zeilenumbrüche (\n) entfernt. Danach sah die Website im IE aus wie Kraut und Rüben. Doch warum dies der Fall ist... keine Ahnung. Vielleicht habt Ihr ja eine Idee?

Ich empfehle eh, den neuen Internet Explorer oder noch besser Firefox zu verwenden, dann passieren solche Fehler nicht.




  Kommentare (3)
 1 Geschrieben von: Marcel, am 04.06.2008 um 14:45
Will man allerdings in der Breite seines Menüs Variabel bleiben kann man auch, falls mit PHP gearbeitet wird, ein 'echo' vor [U]jede[/U] Zeile schreiben: 
[CODE] 
 
echo'menupunkt1'; 
echo'menupunkt2'; 
echo'menupunkt3'; 
[/CODE] 
Dann funktionierts auch. 
 
[QUOTE] Ich empfehle eh, den neuen Internet Explorer oder noch besser Firefox zu verwenden, dann passieren solche Fehler nicht. [/QUOTE] 
 
Richtige Ansicht, aber man sollte die User nicht vernachlässigen, die immer noch den ie6 benutzen (sind ja schließlich noch fast ein Drittel). 
 
Viele Grüße ;-) 
 
Marcel 
blog4web.de[URL=http://blog4web.de]Webdesign Blog[/URL]
 2 Geschrieben von: Armin Vieweg, am 04.06.2008 um 14:49
[QUOTE]Richtige Ansicht, aber man sollte die User nicht vernachlässigen, die immer noch den ie6 benutzen (sind ja schließlich noch fast ein Drittel). [/QUOTE] 
 
Joar... leider :(
 3 Geschrieben von: jaskdlf, am 22.11.2010 um 13:59
dank auch
Letzte Aktualisierung ( Mittwoch, 4. Juni 2008 )
 
< Zurück   Weiter >



Tipps & Tricks Kategorien

Beliebteste Tipps