Alter, wo ist meine Spalte?

(Apologies für den Titel, aber das ist, wie ich mich jetzt fühle.)Alter, wo ist meine Spalte?

habe ich vor kurzem die gegeben worden ... Gelegenheit ... vollständig das Layout einer Website Redesign unterstütze ich. Um mein CSS einfach zu halten und meine HTML-Semantik zu behalten, entschied ich mich für eine modifizierte Version von the "holy grail" layout (der Hauptunterschied besteht darin, die rechte Spalte innerhalb der mittleren Spalte zu verschieben, was die Dinge noch weiter vereinfacht und die mittlere Spalte festsetzt).

Nach einer vernachlässigbaren Menge an Fiedeln, hatte ich das neue Layout in FF3, Chrome und Opera arbeiten, was bedeutete, es war Zeit, IE6 zu starten. Wie zu erwarten ist, bricht das Layout (die linke Spalte fehlt komplett). Allerdings habe ich nicht erwartet, dass es so spektakulär bricht - ich habe anscheinend eine Art Rendering-Bug in IE6 ausgelöst, den ich weder isolieren noch eliminieren kann.

Bei der Anpassung des heiligen Gral-Layouts hatte ich zunächst den IE6-spezifischen Hack weggelassen, den es benutzt, bei dem es mit den Änderungen, die ich an der rechten Spalte gemacht habe, nicht so sein soll (sollte nicht?) berücksichtigt die Breite dieser Spalte, die in meinem Layout nicht auf derselben Ebene erscheint. Trotzdem war es meine erste Schätzung, aber es stellte sich heraus, dass eine sehr seltsame Zahl (246px, die nirgendwo anders im Stylesheet erscheint) erforderlich war. Daher versuchte ich, das Fenster zu verkleinern, um sicherzustellen, dass es nicht verwandt war zur Seitengröße. Sehr zu meiner Überraschung sprang die Spalte ~ 1000 Pixel nach rechts, weit über den Rand der Seite.

Gehen wir zurück und Entfernen des IE6 hacken, das gleiche Verhalten tritt auf, wenn die Größenänderung, nur statt springt von der linken Seite des Layouts aus der Seite, erscheint es aus dem Nichts auf der rechts Boerse Seite des Layouts. Ich habe mit jedem Teil des Layouts, der auch nur entfernt verwandt erscheint und mit allen IE6-Rendering-Bugs, die ich kenne, gegoogelt, abgefangen, aber ich kann nicht das Verhalten bei der Seitengrößenänderung ausschließen.

Hat jemand diesen Bug schon mal gesehen, wenn es ein Bug ist? Vollständiger Code folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
     <title>Modified grail layout</title> 

     <style type="text/css"> 
      * { 
       border: 0; 
       margin: 0; 
       padding: 0; 
      } 

      #main { 
       background: white; 
       overflow: auto; 
       padding-left: 180px; 
      } 

      #content { 
       background: #dfd; 
       float: left; 
       padding: 10px 10px 0; 
       width: 800px; 
      } 

      #left { 
       background: #ccc; 
       float: left; 
       margin-left: -100%; 
       position: relative; 
       padding: 10px 10px 0; 
       right: 180px; 
       width: 160px; 
      } 

      #right { 
       background: #fdd; 
       float: right; 
       margin-bottom: 10px; 
       padding: 10px 10px 0; 
       width: 160px; 
      } 

      #top { 
       margin: 0 auto; 
       width: 1000px; 
      } 

      body { 
       background: #ddf; 
      } 

      /* fake content */ 

      #cc1 { 
       height: 320px; 
       width: 800px; 
      } 

      #cc2 { 
       height: 320px; 
       margin-right: 190px; 
      } 

      #cc3 { 
       height: 160px; 
       margin-right: 190px; 
      } 

      #lc1 { 
       height: 120px; 
       margin-left: auto; 
       margin-right: auto; 
       width: 144px; 
      } 

      #lc2 { 
       height: 300px; 
       width: 160px; 
      } 

      #lc3 { 
       height: 400px; 
       width: 160px; 
      } 

      #rc1 { 
       height: 400px; 
       width: 160px; 
      } 

      #rc2 { 
       height: 300px; 
       width: 160px; 
      } 

      div.fake-content { 
       background: #666; 
       color: white; 
       margin-bottom: 10px; 
      } 

      /* Internet Explorer (all) */ 

      #ie body { 
       text-align: center; 
      } 

      #ie #left { 
       text-align: center; 
      } 

      #ie #left * { 
       text-align: left; 
      } 

      #ie #right { 
       margin-bottom: 0; 
      } 

      #ie #top { 
       text-align: left; 
      } 

      /* Internet Explorer 6 */ 

      #ie6 #left { 
       left: 246px; /* WTF!? */ 
      } 
     </style> 
    </head> 

    <body> 
     <!--[if IE 6]><div id="ie"><div id="ie6"><![endif]--> 
     <!--[if IE 7]><div id="ie"><div id="ie7"><![endif]--> 
     <!--[if IE 8]><div id="ie"><div id="ie8"><![endif]--> 

     <div id="top"> 
      <div id="main"> 
       <div id="content"> 
        <div id="cc1" class="fake-content">cc1</div> 

        <div id="right"> 
         <div id="rc1" class="fake-content">rc1</div> 
         <div id="rc2" class="fake-content">rc2</div> 
        </div> 

        <div id="cc2" class="fake-content">cc2</div> 
        <div id="cc3" class="fake-content">cc3</div> 
       </div> 

       <div id="left"> 
        <div id="lc1" class="fake-content">lc1</div> 
        <div id="lc2" class="fake-content">lc2</div> 
        <div id="lc3" class="fake-content">lc3</div> 
       </div> 
      </div> 

      <p id="footer">&copy;2009 Blah blah blah</p> 
     </div> 

     <!--[if IE]></div></div><![endif]--> 
    </body> 
</html>

Quelle

2009-02-24 Ben Blank

Ich bin mir nicht ganz sicher, warum Sie den Selektor "#ie body" anstelle von "#ie #body" benutzen. Ich würde wahrscheinlich eine ID verwenden, die nicht mit einem HTML-Element identisch ist, um mich nicht zu verwirren. – snippid

Ähm ... Eigentlich wollte ich das ändern (bin schon einmal darüber gestolpert). Lass mich das jetzt tun ... –

Angeben position: relative für #top Fixes es in IE6, es glaubt oder nicht.

Siehe this, these usw.

Quelle

2009-02-24 02:05:09 vladr

Es ist tatsächlich! Ich wünschte immer noch, ich wüsste, wo 246px herkommt, aber solange ich mich nicht mehr um IE6 kümmern muss, denke ich, dass ich gut bin ... ;-) –

Deshalb I say Tabellen nicht böse sind! Solange Sie sie nicht auf hackliche Weise benutzen (wie es die Leute im Jahr 2000 taten), sind sie perfekt für das Layout.

Was ist die weniger hackische Alternative?
Eine Struktur, die seltsame Hacks benötigt, die nicht einmal sinnvoll sind !!

Der Kommentar des akzeptierte Antwort „es glauben oder nicht“, sagt sie alle!

* Ich bin dies ein Wiki zu machen, aus Angst vor Verfolgung durch css Eiferer

prüfen auch diese Antwort aus:

Vertical centering with css (Ich mag seine Kommentare :))

und ..

Give up and use tables!

Quelle

2009-02-26 01:56:43 hasen

Ich meine nichts für ungut, aber ich kann mir nicht wissentlich vorstellen etwas falsch, nur weil es einfacher ist. Ich habe einige Zugänglichkeitsbedürfnisse selbst, deshalb mache ich meine Seiten nicht leichtfertig für andere zugänglich. –

was macht es genau falsch? – hasen

Nichts, divs sind nur mehr hastle, weil sie kaum jemals gleich aufstellen. –

-2

Verwenden Sie Tabellen, hier ist ein Beispiel für Sie:

<html> 
<head> 
<title>3 column table</title> 
</head> 
<body> 

<table style="width:100%;"> 
<tr> 
<td style="width:20px;border: solid 1px black;">Left column</td> 
<td style="border: solid 1px black;">Center Column</td> 
<td style="width:20px;border: solid 1px black;">Right column</td> 
</tr> 
</table> 

</body> 
</html>

Dies funktioniert, ich habe es getestet.

Quelle

2010-01-26 13:04:51

Bitte erklären Sie die Abstimmung unten, damit ich profitieren kann. –

nicht mein Downvote, aber die Leute hier im Allgemeinen missbilligen Tabellen für die Formatierung. –

Warum? Sie arbeiten viel besser. –

Antwort

Verwandte Themen