zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layoutproblem im IE6/Win bei 2-Zeilen mit 3Spalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.11.2006, 17:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2006
Beiträge: 5
Raphalon befindet sich auf einem aufstrebenden Ast
Standard Layoutproblem im IE6/Win bei 2-Zeilen mit 3Spalten

Hallo,

habe folgendes Problem beim IEv6 unter WinXP (nicht z.B. im FF 1.5.0.: die Zelle "Zeile1/Spalte2" hat links und rechts einen leeren Spalt und schließt nicht mit den angrenzenden Spalten ab. Das liegt wohl an der Angabe mit height im Bereich kopf_mitte, was wiederum auf den 3-Pixel Bug hindeuten würde. Allerdings kann ich keine Lösung finden, die darauf paßt.

Kann mir jemand sagen, wie ich das Problem lösen kann?

Danke!

Raphalon


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>

<title>First site with CSS</title>

<style type="text/css">

   * { margin: 0; padding: 0; }

   body {
       color: black; 
       background-color:#FFFFF0;
       font-size:100.01%;
       font-family:Verdana,sans-serif;
       margin:0; 
       padding:1em;
       min-width:41em; 
   }
   
   #zeile_eins {
       width:100%;
       margin:0;
       padding:0;
       border:none;
       overflow:auto;
   }
   
   #zeile_zwei {
       width:100%;
       margin:0;
       padding:0;
       border:none;
       overflow:auto;
   }
   
   
   /* ------------------ Kopfbereich links: Navigation  ------------------ */
   
   #kopf_links {
       float:left;
       background-color:#E1ADAA;
       width:25%;
       margin:0;
       padding:0;
       border:none;
   }
   
   
   /* ------------------ Kopfbereich mitte: Navigation  ------------------ */
   
   #kopf_mitte {
       background-color:#C7E6C9;
       padding:0;
       height:6em;
       margin-left:25%;
       margin-right:25%;
       border:none;
   }
   
 
     
   /* ------------------ Kopfbereich rechts: Navigation  ------------------ */
   
   #kopf_rechts {
       background-color:#BAE2EE;
       float:right;
       width:25%;
       margin:0; 
       padding:0;
       border:none;
   }
   
   
   /* ------------------ Zentralbereich links: Navigation  ------------------ */
   
   #zentral_links {
       clear:both;
       float:left;
       background-color:#F9DEC1;
       width:25%;
       margin:0; 
       padding:0;
       border:none;
   }
   
   
   /* ------------------ Zentralbereich mitte: Inhalt  ------------------ */
   
   #zentral_mitte {
       background-color:#E5C1DA;
       margin-left:25%; 
      	margin-right:25%; 
       padding:0;
       border:none;
   }
   
   /* ------------------ Zentralbereich rechts: Platzhalter  ------------------ */
   
   #zentral_rechts {
       background-color:#B0CCD4;
       float:right;
       width:25%;
       margin:0; 
       padding:0;
       border:none;
   }
   
</style>


</head>

<body>

  
      <div id="zeile_eins">
      
      <!-- ******************** linker Kopfbereich *********************** -->
      <div id="kopf_links">
         <p>Kopfbereich links</p>
      </div>
      
      <!-- ******************** rechter Kopfbereich *********************** -->
      <div id="kopf_rechts">
         <p>Kopfbereich rechts</p>
      </div>
      
      <!-- ******************** mittlerer Kopfbereich *********************** -->
      <div id="kopf_mitte">
         <p>Kopfbereich mitte</p>
      </div>
      
      </div> 
      
      
      
      <div id="zeile_zwei">
      
      <!-- ******************** linker Zentralbereich ************************ -->
      <div id="zentral_links">
         <p>linker Zentralbereich</p>
      </div>
      
      <!-- ******************** rechter Zentralbereich *********************** -->
      <div id="zentral_rechts">
         <p>rechter Zentralbereich</p>
      </div>
      
      <!-- ******************** mittlerer Zentralbereich ********************* -->
      <div id="zentral_mitte">
         <p>mittlerer Zentralbereich</p>
         <p>Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext  Testtext 
            Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext 
            Testtext Testtext Testtext Testtext Testtext Testtext  Testtext Testtext Testtext 
            Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext 
            Testtext Testtext Testtext Testtext Testtext Testtext  Testtext Testtext Testtext 
            Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext 
            Testtext Testtext Testtext Testtext Testtext Testtext  Testtext Testtext Testtext 
            Testtext Testtext Testtext Testtext Testtext</p>
      </div>
      
      </div>
     

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.11.2006, 17:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Raphalon Beitrag anzeigen
Das liegt wohl an der Angabe mit height im Bereich kopf_mitte, was wiederum auf den 3-Pixel Bug hindeuten würde.
Richtig.

Zitat:
Allerdings kann ich keine Lösung finden, die darauf paßt.
In der Knowledge-Base findet sich dies hier von toscho:
http://xhtmlforum.de/33087-noch-einm...tml#post240999
In deinem Fall für den mittleren Container die margins für IE6 ganz weglassen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.11.2006, 10:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2006
Beiträge: 5
Raphalon befindet sich auf einem aufstrebenden Ast
Standard Will nicht...

Zitat:
Zitat von fricca Beitrag anzeigen
In deinem Fall für den mittleren Container die margins für IE6 ganz weglassen.
Das habe ich probiert, aber es möchte nicht funktionieren. Siehe den Code unten, den ich weiter vereinfacht habe (nur noch eine Zeile). Was mir auch im zuerst zitierten Beispiel (siehe oben) nicht ganz klar ist: in der zweiten Zeile tritt der Bug nicht mehr auf.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>

<title>First site with CSS</title>

<style type="text/css">

   * { margin: 0; padding: 0; }

   body {
       color: black; 
       background-color:#FFFFF0;
       font-size:100.01%;
       font-family:Verdana,sans-serif;
       padding:1em;
       min-width:41em; 
   }
   
  
   /* ------------------ Kopfbereich links: Navigation  ------------------ */
   
   #kopf_links {
       float:left;
       background-color:#E1ADAA;
       width:25%;
   }

   
   /* ------------------ Kopfbereich mitte: Navigation  ------------------ */
   
   #kopf_mitte {
       background-color:#C7E6C9;
       margin-left:25%;
       margin-right:25%;
   }
   
   * html #kopf_mitte {
       height:1%;
       margin:0;
   }
     
   /* ------------------ Kopfbereich rechts: Navigation  ------------------ */
   
   #kopf_rechts {
       background-color:#BAE2EE;
       float:right;
       width:25%;
   }
</style>


</head>

<body>
    
      <!-- ******************** linker Kopfbereich *********************** -->
      <div id="kopf_links">
         <p>Kopfbereich links</p>
      </div>
      
      <!-- ******************** rechter Kopfbereich *********************** -->
      <div id="kopf_rechts">
         <p>Kopfbereich rechts</p>
      </div>
      
      <!-- ******************** mittlerer Kopfbereich *********************** -->
      <div id="kopf_mitte">
         <p>Kopfbereich mitte</p>
      </div>
          

</body>
</html>
Mit Zitat antworten
  #4 (permalink)  
Alt 14.11.2006, 10:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Raphalon Beitrag anzeigen
Das habe ich probiert, aber es möchte nicht funktionieren.
Schau dir toschos Lösungsvorschlag genau an. Dort gibt es negative margins. Diese brauchen die Randcontainer!

Zitat:
Was mir auch im zuerst zitierten Beispiel (siehe oben) nicht ganz klar ist: in der zweiten Zeile tritt der Bug nicht mehr auf.
Der mittlere Bereich des zweiten Teils hat kein "Layout". Deshalb tritt der 3px-Bug nur als Textverschiebung auf.
Wenn du die Textverschiebung verhindern willst, musst du dem mittleren Container Layout geben -- dann hast du das gleiche Problem, wie im oberen Bereich.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.11.2006, 13:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2006
Beiträge: 5
Raphalon befindet sich auf einem aufstrebenden Ast
Standard Danke!

1000 Dank! Genau so funktioniert es.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabellen Abstand zwischen Zeilen, nicht aber zwischen Spalten SchlechterInformatiker CSS 3 01.10.2009 18:39
Tabelle: Mehrere Zeilen aus einmal einbleden und wieder ausblenden - Wie? EPMS Javascript & Ajax 6 15.07.2009 14:29
Zeilen aus HTMLtabelle ausblenden X4R5L Javascript & Ajax 7 29.11.2007 20:57
Zeilen in Tabelle löschen MTH Javascript & Ajax 0 11.09.2007 14:08
Aus-/Einblenden von Zeilen in einer Tabelle mit JavaScript brainstorm1984 Javascript & Ajax 3 02.02.2007 11:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:44 Uhr.