• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[IE7/8] float und clear

Körnerbrötchen

Körnerbrötchen

Aktives Mitglied
Moin moin Jungs und Mädels,
ich hab mal wieder eines der berühmten clear-Problem. Problem tritt im IE8 und IE7 auf.
Schaut es auch selbst an: Vinzenz-Pallotti-Kolleg Die ganze Content-Box fängt erst nach der Navigation an.
FF und Opera laufen.

Vielen Dank
Körnerbrötchen

//edit: Dem IE8 liegt es nur an zu wenig margin-left. Der IE7 streikt noch immer.
//edit2: Falls sich jemand über die Validator-Fehler beschweren möchte: Diese liegen nicht im Template, sondern in den einzelnen Beiträgen begründet.
 
Zuletzt bearbeitet:
Werbung:
Code: 
div#content { margin-right: 0; }

Weiter habe ich gerade nicht gesucht. Da sind noch ein paar Pixel zu viel irgendwo.

Edit: Scheint dem IE7 noch nicht zu reichen.
 
OT:

Ja ja, der IE :p

Wie gut, dass ich zu Mac OS X konvertiert bin und mit dem IE nie mehr zu kaempfen haben muss :p
Ausser ein groesseres Projekt steht an, welches IE Support erfordert. Vor den Conditional Comments graut es mir jetzt schon :-?
 
Werbung:
@hokage: Wie genau hilft mir dein Post jetzt weiter? Soll ich kein Windows mehr benutzen und das Problem erledigt sich so von alleine? Leider nicht, denn ich nutze Windows nämlich gar nicht mehr im Produktiveinsatz. Bitter. OT bleibt OT und hat hier überhaupt nichts zu suchen. Danke.

@mermshaus: Ja, leider hilft mir das nicht. Zu viele Pixel können es eigentlich auch nicht sein, denn ich kann die Content-Box so weit nach rechts schieben wie ich möchte, es hilft nichts. :(
 
Ich würde es wohl mal lokal kopieren und ein wenig rumprobieren, wenn du es noch mal online stellst.

Edit: Okay, der PC ist wohl wieder an. Ich editiere hier, wenn ich auf was komme.

Edit 2: Welches Problem versuchst du denn hier zu lösen?

Code: 
/* Inhaltsbereich */
#content {
	margin:-10px 0 0 221px;
	padding:20px;
	background:url(../img/site/content.gif) repeat-y #fff;
	width:690px;
	overflow:hidden;
}

* html #content {
	margin:-10px 218px;
	width:730px;
}

*:first-child+html #content {
	margin:-10px 230px;
}

Wenn ich die beiden unteren Selektoren auskommentiere, passt es auch im IE7 schon besser. Ich glaube nicht, dass du hier irgendwelche Hacks brauchst.
 
Zuletzt bearbeitet:
Die Seite ist nur sporalisch online.
Ich habe die Seite nur Überfliegen können.

So kann ich dir nur sagen, daß width für #content im IE<8 Layout auslöst und der margin somit nicht mehr unter dem Float liegt.
Du verwendest eine px-Breite für beide Spalten. In diesem Fall ist es am einfachsten beide Spalten mit einer festen Breite zu floaten.
 
Werbung:
neuroleptika schrieb:
Die Seite ist nur sporalisch online.
Zum Vergrößern anklicken....
Ja, ich dachte die Lösung wäre schneller da und wollte dafür nicht ne Joomla-Installation online stellen. :-/ Sorry… => Vinzenz-Pallotti-Kolleg
neuroleptika schrieb:
So kann ich dir nur sagen, daß width für #content im IE<8 Layout auslöst und der margin somit nicht mehr unter dem Float liegt.
Zum Vergrößern anklicken....
Ich kapier kein Wort. o_O

mermshaus schrieb:
Wenn ich die beiden unteren Selektoren auskommentiere, passt es auch im IE7 schon besser. Ich glaube nicht, dass du hier irgendwelche Hacks brauchst.
Zum Vergrößern anklicken....
Naja, den ersten brauche ich ja für den furchtbaren IE6 (wobei ich den nur sehr sporadisch unterstütze), ohne den zweiten klappt es irgendwie, was mich sehr verwundert, da ich ihn ja erst eingefügt habe, um mit dem IE7 klarzukommen. Sehr seltsam, aber schon einmal wunderbar.

Bleibt bloß noch die Frage zu klären, warum der IE8 weiter muckt. Ich könnte zwar einfach die IE7-Engine anfordern, aber das ist für mich eigentlich keine Lösung. :-/ Setze ich margin auf 200px herunter, verschiebt sich in FF und Co das Design, im IE8 tut sich gar nichts. Da ist es immer noch nach rechts verschoben.
 
du hast keinen CSS-Prolog.
Vielleicht spielen da untersch. Default-Definitionen ne Rolle.

Ansonsten würde ich wie neuroleptika schon sagte beide Spalten in Verbindung mit einer Breite zu floaten.
Das mit dem overflow:hidden für #content halte ich auch für keine gute Idee. :wink:
 
Na ja, es sollte ja noch zu schaffen sein, zwei Spalten zu erzeugen. ;)

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>demo</title>
<style type="text/css">

#pagebody {
    width: 970px;
    margin: 0 auto;
    background: #c00;
}

#sidebar {
    width: 200px;
    margin-left: 15px;    
    background: #369;
    float: left;
    display: inline; /* Fix for IE6 Double Margin Bug */
}

#content {
    padding: 20px;
    margin-left: 25px;
    width: 690px;
    background: #369;
    float: left;
}

#footer {
    clear: both;
}

</style>
    </head>

    <body>

        <div id="pagebody">
            <div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse turpis tortor, sodales id ullamcorper id, tempor sit amet odio. Praesent malesuada orci ac ante consequat a bibendum eros lacinia. In hac habitasse platea dictumst. Praesent pulvinar condimentum aliquet.</div>
            <div id="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>

    </body>

</html>

Getestet in IE 6-8 und Firefox.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben