zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Container / Float-Problem mit IE 5-6

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.10.2007, 23:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2005
Beiträge: 81
Thies befindet sich auf einem aufstrebenden Ast
Standard Container / Float-Problem mit IE 5-6

Es geht um folgende Seite: Link
Das Problem ist, dass die Tabelle mit den Daten sehr breit ist und daher bei Standard-Auflösungen wie 1024*768 die Fensterbreite nicht ausreicht. Kleiner kann ich aber die Tabelle auch nicht machen.

IE 7, FF, Opera & Co. haben damit wenig Probleme, aber bei IE 5-6 wird der rechte Container (col_right) nach unten verschoben, d.h. der Container fängt erst an, wo der linke Container (col_left) aufhört.

Kann mir jemand weiterhelfen, denn irgendwie stehe ich auf dem Schlauch, was ich machen muss, damit auch der IE 6 (und ggf. IE 5.5 / IE 5) den Container nicht verschieben?

Danke im Voraus

Frank-Andre
__________________
Credendo Vides
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.10.2007, 02:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Grund ist der 3px-Bug des IE < 7: Der Abstand von Non-Floats neben Floats wird immer um 3px erhöht. Hat der Non-Float neben dem Float zuwenig Platz, rutscht er trotz margin-left unter den Float, weil er dort einfach 3px mehr Platz hat.

Ich habe irgendwann mal stundenlang nach einer Lösung gesucht, fand aber keine außer position: absolute; für den Float (nimmt ihn aus dem Dokumentfluß, so daß er beim Non-Float keine 3px-margin-Erhöhung mehr bewirkt).

Im konkreten Falle kannst Du natürlich auch ein div um alles legen und diesem eine ausreichende Breite geben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.10.2007, 10:55
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

Überbreite Tabellen bei Float sind ein grundsätzliches Problem im IE < 7.
Vor längerer Zeit hatte ich mal ein Beispiel gepostet, bei dem der IE sich ähnlich wie andere Browser verhält.
http://xhtmlforum.de/41803-fusszeile...tml#post306981

Du könntest auch die Tabelle mit einem div einschließen, diesem 100%-Breite geben und dort scrollen.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.10.2007, 15:18
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

<ot>
Konntest Du das jemals ohne #wrap lösen? Ich hatte es damals mit 2 divs versucht, ein Float und ein Non-Float, aber spätestens beim IE 5.x war immer Schluß
</ot>
Mit Zitat antworten
  #5 (permalink)  
Alt 22.10.2007, 15:27
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

Es ist mindestens ein Element nötig, das die beiden floatenden Spalten zusammenfasst. Es muss nicht zwangsläufig wie in dem gezeigten Beispiel alles umfassen.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.10.2007, 16:04
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Es muss nicht zwangsläufig wie in dem gezeigten Beispiel alles umfassen.
Das ist klar. Schade, daß der IE 5.x body so "stiefmütterlich" behandelt, das wäre perfekt gewesen (im IE 6 geht's ja auch mit body). Wobei man meistens (so auch im konkreten Fall) ja doch ein entsprechendes umgebendes Element hat.
Mit Zitat antworten
  #7 (permalink)  
Alt 22.10.2007, 20:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2005
Beiträge: 81
Thies befindet sich auf einem aufstrebenden Ast
Standard

Danke, das werde ich mir mal genauer und in Ruhe anschauen müssen. Bin mal gespannt!

Vor allem muss das dann auch die anderen Seiten richtig anzeigen, denn die Layout-Templates sind übergreifend und nicht nur für die Seiten mit Tabellen.

CU

Frank-Andre
__________________
Credendo Vides
Mit Zitat antworten
  #8 (permalink)  
Alt 22.10.2007, 21:32
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

Sollte hoffentlich in den "normalen" Seiten erst recht funktionieren.

Ich hab das Prinzip hier nochmal auf deine Spalten angewendet, damit dürfte es leichter umzusetzen sein.
Das etwas merkwürdige Verschieben der linken Spalte (neg. rechter Margin + rel. Pos.) ist ein Versuch; beim Verschieben mit negativem linken Margin neigt der IE zu "hüpfenden" Spalten. Wäre nett, wenn du's mal testen würdest und ein Feedback zur Stabilität gibst.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>xxx</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <style type="text/css">
        * {
            margin:0;
            padding:0;
            }
        body {
            background:yellow;
            }

        #content {
            background:#fff;
            /* containing floats + layout for IE */
            float:left;
            width:100%;
            }

        #col_left { 
            float: left; 
            width: 238px; 
            background:red;
            }

        #col_right { 
            margin-left: 280px; 
            margin-right: 2px; 
            background:green;
            }

        #content table {
            width:150%;
            }

        #content td {
            border:1px solid black;
            }

        /* anti IE-drop */

        * html #content {
            border-left:280px solid #fff;
            margin:0;
            padding:0;
            float:none;
            width:auto;
            height:1px;
            }

        * html #col_left {
            margin-right:-238px;
            position:relative;
            right:280px;
            }

        * html #col_right {
            margin:0;
            float:left;
            width:100%;
            }

    </style>
</head>
<body>
    <div id="content">
        <div id="col_left">
            Linke Spalte<br />.<br />.
        </div>
        <div id="col_right">
            Inhaltsbereich
            <table>
                <tr>
                    <td>Zelle</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
Mit Zitat antworten
  #9 (permalink)  
Alt 23.10.2007, 17:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2005
Beiträge: 81
Thies befindet sich auf einem aufstrebenden Ast
Standard

Klappt Super !!!! Danke!!!

ich habe Deine CSS-Angaben in eine separate ie.css eingetragen, die über Browserweiche nur beim IE 5-6 zum Tragen kommt und das Ergebnis ist optimal.

Der Weg dahin ist wirklich sehr interessant, wie bist Du nur darauf gekommen? Hast Du darüber mal einen "Artikel" geschrieben, was Du warum wie gemacht hast? So was müsste man eigentlich veröffentlichen, das Problem werden sicherlich auch andere haben.

CU

Frank-Andre
__________________
Credendo Vides
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.10.2007, 12:07
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

Im Moment ist im IE dein Inhaltsbereich noch um 30px zu breit. (Ich hatte das Padding von #col_right entfernt und zum Margin addiert.) Bei den IE-Angaben noch padding:0 für #col_right dazunehmen.

Bisher habe ich nichts darüber geschrieben, es liegen nur ein paar Testcases bei mir rum. Vielleicht ändere ich das mal.
Ich habe aufgegegen, das verstehen zu wollen -- und stelle einfach nur fest, dass es bestimmte Konstellationen gibt, die im IE stabil bleiben.
Wenn du in diesem Beispiel den breiten Border des #content durch ein Padding ersetzt, bricht's wieder um. Ein Margin hingegen funktioniert.
Mit Zitat antworten
Sponsored Links
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
CSS Problem - Finde den Fehler nicht... expou CSS 4 27.04.2011 13:31
Layout Problem mit float tr67 CSS 7 21.10.2008 20:03
So langsam bekomme ich die Krise mit den DIVs Thuroc CSS 12 12.11.2007 15:25
Problem mit float CSSNoobie CSS 2 07.05.2006 01:10
Zeilenumbruch bei horizontal nebeneinanderliegenden divs GrafZahl Knowledge Base 10 16.07.2004 17:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:43 Uhr.