IE 6 Darstellungsproblem

[jmc]

Ich habe wieder einmal ein Darstellungsproblem mit dem IE 6 und wollte fragen, ob mir jemand vieleicht ein paar Tips geben kann, was ich da verändern muss, dass es sogar im IE 6 richtig dargestellt wird.
Die Seite sollte eigentlich HTML-valide sein.
Die Domain ist colombianink-tattoo.ch.

Ich werde sicher die meisten Fehler auch noch selbst finden, aber ich kenne die Bugs des IE 6 nicht so genau und ich weiss nur, dass es etliche davon geben soll... Deswegen wäre es super, wenn mir jemand sagen könnte wonach ich da suchen muss. Beim IE7 z.B. wird eigentlich alles soweit richtig angezeigt.

Vielen im Voraus!

[Blackgreetz]

Bitte ein Screen vom IE6.

Ich selber hab keinen mehr drauf und könnte dann nicht helfen

mfg

[jmc]

Das wird dir wohl noch mehr weiterhelfen:standalone IEs

Es gibt gleich ziemlich viele Bugs (jedenfalls scheint es so...). Der IE 5.5 zeigt es im Vergleich zum IE 6 richtig schön an [Ich hasse den IE, schon einmal erwähnt?]

[Blackgreetz]

Funktionieren bei mir leider nicht

mfg

[jmc]

Dann muss eben doch ein screeshot her:

[Blackgreetz]

Halleluja - da wird ja nichts angezeigt.

Also ich hab da mehrere Probleme:

1. Du solltest dich mit dem Thema Div-Suppe beschäftigen.
2. Das Menü wird über JS geladen? (z.b. imageloader.js?)
3. Wer hat bitte den Quelltext formatiert?

Frage 2 ergibt sich aus Frage 3, denn ich kann keine 1-Zeiler-geh-bis-in-das-unendliche-Datei lesen, tut mir leid.

mfg

[ArSeN]

Joa, der IE kennt kein min-height - außer so: http://standards.webmasterpro.de/ind...in_height.html

[jmc]

Das mit den fehlenden Absätzen tut mir ebenfalls leid... Ich werde auf morgen die ganze HTML-Datei strukturieren.
Das ganze ist in PHP gemacht und wird da absichtlich ohne Absätze ausgegeben... hat einige Vorteile ausser es kommt zu sowas.

Zu dem was du DIV-Suppe nennst... Damit habe ich mich schon eine ganze Weile befasst, deswegen auch das ganze mit Divs und da sollte theoretisch eigentlich auch alles stimmen. Es ist wirklich nur der IE 6, nicht IE 5.5 oder IE 7 und auch nicht FF, Opera, oder Safari, (jeweil die 3 letzten Major Versions), der mir Sorgen bereitet.

Das Menu wird nicht von der Datei imageloader.php geladen.
Diese Datei sorgt nur dafür, dass Alle Bilder aus einem bestimmten Verzeichnis, oder aus mehreren, gecached werden, wenn der Browser sonst alles bereits geladen hat.
Hier einmal diesen Einzeiler (das ist aber garantiert nicht das Problem):

imagenumber = 0;
images = new Array();
paths = Array("filler.gif", "close.gif", "menubg.png", "mainbg.gif",
"cursor.gif", "bg.png", "cdd.png", "5_f.png", "5_h.png",
"1_f.png", "favicon4.gif", "favicon0.gif", "3_f.png", "1_h.png",
"favicon2.gif", "2_f.png", "favicon5.gif", "0_f.png", "0_h.png",
"favicon1.gif", "favicon3.gif", "3_h.png", "color.png", "2_h.png",
"seperatorbottom.png", "carrow2.gif", "carrow1.gif", "8_f.png",
"4_f.png", "4_h.png", "bgcolor.png", "8_h.png", "6_f.png",
"6_h.png", "7_f.png", "menuborderbottom.png", "7_h.png",
"menubordertop.png", "9_f.png", "9_h.png", "open.gif",
"footerbg.gif", "fleche2.gif", "fleche1.gif", "open.png",
"m_home_a.png", "m_home.png", "toolbar.png", "m_home_o.png",
"m_gallery_a.png", "m_gallery.png", "m_contact_a.png",
"m_aboutme_a.png", "m_contact.png", "m_aboutme.png",
"m_gallery_o.png", "m_gb_a.png", "new_entry.gif", "m_gb.png",
"m_contact_o.png", "m_aboutme_o.png", "new_entry_o.gif",
"m_gb_o.png", "m_studio_a.png", "m_studio.png", "fleche1.png",
"m_studio_o.png", "fleche2.png", "topnavibg.png", "textbg9.gif",
"textbg8.gif", "textbg7.gif", "textbg2.gif", "palette.gif",
"textbg1.gif", "textbg4.gif", "textbg0.gif", "textbg15.gif",
"textbg14.gif", "textbg6.gif", "textbg11.gif", "textbg10.gif",
"loading-bar-black.gif", "textbg12.gif", "textbg13.gif", "textbg3.gif",
"textbg5.gif", "banner.png", "flyer.jpg");
for(i = 0; i < paths.length; i++){
 images[i] = new Image();
}
function preloadImage(){
 images[imagenumber].src = "./img/" + paths[imagenumber];
 if(imagenumber < paths.length-1){
  if(images[imagenumber].complete){
   imagenumber++;
   setTimeout(preloadImage, 0);
  }else{
   images[imagenumber++].onload = function(){
    setTimeout(preloadImage, 10);
   }
  }
 }else{
  if(images[imagenumber].complete){
   window.status = paths.length + ' Images cached';
   setTimeout(function(){
    window.status = 'Fertig';
   }, 2000);
  }else{
   images[imagenumber].onload = function(){
    window.status = paths.length + ' Images cached';
    setTimeout(function(){
     window.status = 'Fertig';
    }, 2000)
   }
  }
 }
}
window.onload = preloadImage;

[EDIT]
Zum zweiten Post: deswegen habe ich eigentlich den Konditionalen Kommentar für den IE eingefügt:

div.content {
	height:expression(this.scrollHeight > 600 ? "auto" : "600px");
}

[EDIT 2]
Der HTML-Code (ich hoffe er entspricht in etwa den Forenregeln; weiss nicht ob ich genügend umgebrochen habe):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Colombian ink - Tattoo &amp; Piercing Studio</title>
<meta name="description" content="Colombian ink - Tattoo &amp; Piercing Studio - Merkurstrasse 52, 8640 Rapperswil">
<meta name="author" content="JMC">
<meta name="robots" content="all">
<meta name="keywords" content="colombian ink, tattoo, tattoos, piercing, studio, rapperswil, colombian, ink, home">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="Colombian ink - Tattoo &amp; Piercing Studio">
<meta name="DC.Language" content="de">
<link rel="Stylesheet" type="text/css" href="default.css" media="screen">

<link rel="shortcut icon" type="image/x-icon" href="img/favicon2.gif">

<script type="text/javascript" src="imageloader.php"></script>

<script src="x.js" type="text/javascript"></script>
<script type="text/javascript">
document.onkeydown = function(e){
 e = e || window.event;
 var key = e.keyCode || e.which || e.charCode, alt = e.modifiers ? e.modifiers & Event.ALT_MASK : e.altKey,
  ctrl = e.modifiers ? e.modifiers & Event.CONTROL_MASK : e.ctrlKey;
 if(key == 76 && alt && ctrl){
  if(popup_isopen){
   popup_close();
  }else{
   popup_open($("login"));
  }
 }else if(key == 27 || key == 17 || key == 18 || (key == 76 && alt && ctrl)){
  if(popup_isopen && key == 27){
   popup_close();
  }
  if(Browser.IE){
   e.cancelBubble = true;
   e.returnValue = false;
  }else{
   e.stopPropagation();
   e.preventDefault();
  }
 }
}

</script>
<!--[if lt IE 7]>
<style type="text/css">
.tbSDD {
	width:expression(this.scrollWidth > 42 ? "auto" : "42px");
}
.tbFDD {
	width:expression(this.scrollWidth > 122 ? "auto" : "122px");
}
div.content {
	height:expression(this.scrollHeight > 600 ? "auto" : "600px");
}
</style> 
<![endif]-->
<!--[if IE]>
<style type=\"text/css\">
fieldset > div {
	margin-top: 25px;
}
</style>
<![endif]-->
</head><body>
<div id="layer" style="display: none;"></div>
<div id="popup" style="display: none;"></div>
<div id="login" style="display: none;">
 <table style="width:100%;height:100%;"><tbody>
  <tr><td><form action="./?" method="POST">
   <table style="margin:auto;"><tbody>
    <tr>
     <td>Benutzername:</td>
     <td>
      <input id="first" name="username" value="Benutzername" onfocus="if(value =='Benutzername'){value='';};" 
       onblur="if(value ==''){value='Benutzername';};" type="text">
     </td>
    </tr>
    <tr>
     <td>Passwort:</td>
     <td>
      <input name="password" value="Passwort" onfocus="if(value =='Passwort'){value='';};" 
       onblur="if(value ==''){value='Passwort';};" type="password">
     </td>
    </tr>
    <tr>
     <td></td>
     <td>
      <input value="login" type="submit">
     </td>
    </tr>
   </tbody></table>
  </form></td></tr>
 </tbody></table>
</div>
<div class="container">
 <div class="banner"></div>
 <div class="topNavigation"></div>
 <div class="main" style="background-image:url(img/textbg5.gif);">
  <div style="background-image:url(img/mainbg.gif);">
   <div id="leftNavigation">
    <div style="height:11px;background-image:url(img/menubordertop.png);margin-bottom:10px;"></div>
    <div style="padding:10px 20px 15px;color:#FFFFFF;font-size:16px;">
     <div><a href="./index.php" class="m_home m_home_a"><img src="img/filler.gif" alt="Home"></a></div>
     <div><a href="./index.php?page=studio" class="m_studio"><img src="img/filler.gif" alt="Das Studio"></a></div>
     <div><a href="./index.php?page=aboutme" class="m_aboutme"><img src="img/filler.gif" alt="About me"></a></div>
     <div><a href="./index.php?page=guestbook" class="m_gb"><img src="img/filler.gif" alt="G&auml;stebuch"></a></div>
     <div><a href="./index.php?page=gallery" class="m_gallery"><img src="img/filler.gif" alt="Galerie"></a></div>
     <div><a href="./index.php?page=contact" class="m_contact"><img src="img/filler.gif" alt="Kontakt"></a></div></div>
    <div style="height:11px;background-image:url(img/menuborderbottom.png);"></div>
   </div>
   <div class="content"></div></div><div class="seperatorbottom"></div>
   <div class="footer"><div>&#169; 2008 Colombian ink - Tattoo &amp; Piercing Studio. All rights reserved.</div>
  </div>
 </div>
</div>
<script type="text/javascript">
els = document.getElementsByTagName("a");
for(i in els){
 els[i].onfocus = function(e){
  e=e||window.event;
  var t=e.target||e.srcElement;
  t.blur();
 };
}
</script>
</body></html>

[Blackgreetz]

Original geschrieben von jmc
Das mit den fehlenden Absätzen tut mir ebenfalls leid... Ich werde auf morgen die ganze HTML-Datei strukturieren.
Das ganze ist in PHP gemacht und wird da absichtlich ohne Absätze ausgegeben... hat einige Vorteile ausser es kommt zu sowas.

Z.b.?

Zu dem was du DIV-Suppe nennst... Damit habe ich mich schon eine ganze Weile befasst, deswegen auch das ganze mit Divs und da sollte theoretisch eigentlich auch alles stimmen.

Ist die DIV-Suppe denn etwas positives oder negatives?

Von solchen Preloadern halte ich persöhnlich recht wenig, aber bin da wohl auch etwas verkalkt..aber ist ja OT..

Irgendwie kann ich mir nur vorstellen, dass das irgendwas am Javascript "defekt" ist und es deshalb im IE6 nicht funktioniert.

Mal probiert alles davon auszustellen?

mfg

[jmc]

Ein Vorteil ist, dass weniger Daten übertragen wird und das Quelltext-kopieren wenigstens ein bisschen Arbeit mit sich bringt.

Div-suppe wird wohl eher als negativer Begriff benutzt, aber je nachdem welche Tiefe sie erreicht kann sie wohl auch im positiven Sinn benutzt werden. Ich habe nie versucht eine möglichst "tiefe" Suppe zu erreichen sondern das Gegenteil, aber wenn man das ganze valide behalten möchte braucht es manchmal eine bestimmte Tiefe.

Ob es am Javascript liegt hab ich als 1. ausprobiert und die Anzeige ändert sich durch das Ausschalten kein bisschen.

Über die Vor- und Nachteile von Preloadern kann man sicher streiten, aber oft, wenn es sehr kleine Bilder sind und insbesondere, wenn sie bei Hover-Effekten verwendet werden können sie noch einen ganz sinnvollen Komfort darstellen finde ich (wenn dar preloader nur aktiv ist, wenn sonst keine Dateien mehr geladen werden).

[EDIT]

Bei einem hattest du sogar teilweise recht. Der Konditionale Kommentar funktioniert beim evolt-IE nicht, da dort egal welchen IE man gerade Öffnet die Version des neusten IE (IE 7.XX) eingefügt wird. den Konditionalen Kommentar habe ich jetzt abgeändert, auch wenn er beim IE 7 nicht nötig wäre, und es sieht bereits einiges weniger schlimm aus: PrtScr

[EDIT 2]
Vielen Dank bereits einmal. Ein anderer Bug, der schon einiges verunstaltet hat scheint zu sein, dass der IE 6 die Grösse leerer Tags zum Teil ignoriert. Warum er einige divs ignoriert und andere nicht weiss ich noch nicht genau, aber wenn mein ein Bild mit der Grösse 0x0px einfügt sieht es schon viel besser aus.

Ein weiteres Problem scheint zu sein, dass der IE padding und margin zu Breite des Elements addiert. Den Fehler hatte ich auch schon, ich habe es nur nicht bemerkt bei der ersten Ansicht.

Ein letztes Problem scheint zu sein, dass der IE die Grösse von Bildern nicht annehmen will, aber darüber werde ich hoffentlich noch etwas finden (beim Menu).

[Blackgreetz]

Quelltext kopieren erschweren? -g-
Macht kein Mensch mehr (will ich behaupten)

Das "wohl eher" bei "wohl eher negativ" kannst du getrost weglassen.
Du hast zuviele Divs - genauer gesagt: zuviele unbrauchbare.
Dein ganzes Menü ist mit Divs bearbeitet worden..
Normalerweise nimmt man dafür mittlerweile Listen
Infos dazu findest du sicherlich auf Kropffs Seite (bevor er es postet)

Das padding/margin-"Problem" ist ja bekannt.

..im Gegensatz zu dem Bild-Problem, was mir nun nichts sagt?

mfg

[jmc]

Und was wenn ich fragen darf ist an listen besser als an div.
Insbesondere wenn man bestimmte Grössen und Positionierungen erreichen will.
Eine Liste hat ausserdem eine Ebene mehr. Zusätzlich sind Listen weit fehlerhafter was eine möglichst Cross-Browser-fähige Homepage eher erschwert.

Beim Bild: Es ist eine transparente Grafik 1px, welche nicht skaliert wird. Die Sklalierung ist aber beim Browser eingeschaltet und ich glaube ich habe dieses Problem auch schon irgendwo in einem Forum angetroffen.

Was das Quelltext kopieren angeht... das war auch eher ein Scherz und trotzdem ist es, besonders beim javascript, teilweise erstaunlich wo man seine Scripts wieder findet

[Blackgreetz]

Besser ist die Tatsache, dass du die Tags benutzt, die dafür vorgesehen wurden (selbes Problem warum du keine Tabellen zum Seitendesign nutzt )
Der zusätzliche Tag ist nur ein paar Bytes groß... macht am Ende ~0 Unterschied. Leider weiß ich nicht genau, wie der Browser bestimmte Elemente läd und verarbeitet, sodass ich dazu keine Aussage treffen kann. (vgl div-liste)

Du musst aber nicht unbedingt eine Liste in dem Sinn nutzen, sondern kannst es auch zusammenfassen: Menü ohne Liste

Eine Seite weiter wirst du dann auch ein Beispiel für nen Listenmenü sehen.
Größe und Positionierung kannst du mittels CSS -> display:block auf auf Listen anwenden und bearbeiten.

Du hast doch eine Ansammlung von Bereichen(<div>) atm, was einfach nicht sinngemäß ist und du dann in jeder Zeile wieder Divs und noch mehr Divs und noch meh Divs nutzt .. siehe menü.. (falls du firebug hast, guck da mal rein HTML -> bis zum menü durchklicken :: da findest du dann nur noch div, div, div, div

Zu Javascript:
Das leidige Thema, aber ändern kann man es nicht
Notfalls nutzt man es ohne Ordnung und guckt, wo es wie angewendet wurde