XHTMLforum - Anzeigefehler im FF2, im IE7 alles i.O. (floatfehler?)

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Anzeigefehler im FF2, im IE7 alles i.O. (floatfehler?) (http://xhtmlforum.de/showthread.php?t=51818)

Anzeigefehler im FF2, im IE7 alles i.O. (floatfehler?)

Hi,

es geht um folgende Seite *****

Das CSS File dazu:

Code:

@charset "utf-8";

/* CSS Document */



body {

    margin: 0px;

    background:#e0e0e0 url(bg.jpg) repeat-x;

    color:#FFFFFF;

}

#top {

height:140px;

/* background:url(bg.jpg) repeat-x; */

text-align:center;

border-bottom:5px solid #0b0b0b;

margin-bottom:60px;

}

#top h1 {

display:none;

}

#maintop {

margin-top:10px;

background:url(maintop.jpg) no-repeat center;

height:42px;

}

#main {

margin-left:auto;

margin-right:auto;

padding-left:20px;

padding-right:20px;

width:800px;

background:url(mainbg.jpg) repeat-y;

padding-bottom:7px;

}

#mainbot {

margin-bottom:10px;

background:url(mainbot.jpg) no-repeat center;

height:55px;

padding-top:5px;

color:#CCCCCC;

width:840px;

margin-left:auto;

margin-right:auto;

text-align:center;

}

#mainbot a, #mainbot a:visited {

color:#FF9900;

text-decoration:none;

}

#mainbot a:hover {

color:#FFFFFF;

}

#left {

float:left;

width:150px;

margin-left:1px;

margin-right:2px;

border-right:1px solid #4e4e4e;

}

#cont {

float:right;

width:640px;

margin-right:1px;

}

Ich weiss nicht mehr weiter und würde mich über Hilfe freuen.

Wer floatet, sollte auch clearen. Dazu gibt es eigentlich in der FAQ auch Beispiele.

Wenn ich #mainbot noch einen float:clear gebe ändert sich leider rein gar nichts, deswegen suche ich ja Hilfe...

Habe den clear falsche gesetzt deswegen gings nicht.

Jetzt bin ich so weit --> *****
CSS:

Code:

@charset "utf-8";

/* CSS Document */



body {

        margin: 0px;

        background:#e0e0e0 url(bg.jpg) repeat-x;

        color:#FFFFFF;

}

#top {

height:140px;

/* background:url(bg.jpg) repeat-x; */

text-align:center;

border-bottom:5px solid #0b0b0b;

margin-bottom:60px;

}

#top h1 {

display:none;

}

#maintop {

margin-top:10px;

background:url(maintop.jpg) no-repeat center;

height:42px;

}

#main {

margin-left:auto;

margin-right:auto;

padding-left:20px;

padding-right:20px;

width:800px;

background:url(mainbg.jpg) repeat-y;

padding-bottom:7px;

}

#mainbot {

margin-bottom:10px;

background:url(mainbot.jpg) no-repeat center;

height:55px;

padding-top:5px;

color:#CCCCCC;

width:840px;

margin-left:auto;

margin-right:auto;

text-align:center;

clear:both;

}

#mainbot a, #mainbot a:visited {

color:#FF9900;

text-decoration:none;

}

#mainbot a:hover {

color:#FFFFFF;

}

#left {

float:left;

width:150px;

margin-left:1px;

margin-right:2px;

border-right:1px solid #4e4e4e;

}

#cont {

float:right;

width:640px;

margin-right:1px;

}

Ich hab mir die FAQ nochmal angesehen und das Problem das der main nicht mitwächst (fehlender BG) ist bekannt aber die Lösung verstehe ich nicht ganz. In den Lösungsansätzen der FAQ ist davon die Rede das es der IE nicht könnte, aber bei mir kann es der IE blos der FF nicht.

Es ist der IE, der es nicht kann.
Wenn du willst, dass #main die Floats einschließt, muss das Clear innerhalb von #main stattfinden, nicht danach. Bitte arbeite die verlinkten Artikel unter FAQ Punkt 2 der Reihe nach durch (nicht nur lesen).
Die Ursache der fehlerhaften Darstellung im IE ist das proprietäre hasLayout-Konzept.

Achsoooo. Danke jetzt funktioniert es.

Ich muss mal ein par Situationen durchtesten damit sich das Wissen festsetzt ist nicht ganz einfach.