• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Darstellungsfehler im IE

Liz

Lounge-Member
Halloooo und guten Morgen !!

Ich habe folgendes Problem !!

Bin gerade beim Durcharbeiten von mehreren Tutorials zum CSS flexible Layouts.

Bei dem untenstehenden Code, entsteht im IE 6 ein doppelter Abstand links vom Browserfenster.
Bin dann auf die Idee gekommen, für den Div "blue" den untenstehenden Hack einzubauen.
Aber ich nehme an, dass das mehr als verkehrt ist.
Was muss ich tun?



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset="utf-8">
<title>float-example a1</title>

<style type="text/css">

html, body {
margin: 0;
padding: 0;
height: 100%;
background: #ffc;
color: #000;
text-align: center;
font: 100.01%/1.4 arial, helvetica, sans-serif;
}


#blue {
float: left;
margin: .3em;
margin-left:.2em;
voice-family: "\"}\"";
voice-family:inherit;

width: 25%;
background: #d5eeff;
border: 1px solid blue;
height: 22em;
text-align: left;
}

#white {
float: left;
width: 65%;
margin: 0.3em;
background: #fff;
border: 1px solid blue;
height: 22em;
text-align: left;
}
</style>
</head>

<body>
<div id="blue">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

<div id="white">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>


</body>
</html>

Liebe Grüße
Liz
 
Zuletzt bearbeitet:
Hallo !!

Habe die Lösung gefunden !!

Hier: http://www.positioniseverything.net/explorer/doubled-margin.html

Es handelt sich um den doubled-margin-bug im IE.
Die Lösung ist
display: inline

#blue {
float: left;
margin-left:.3em;
margin-top: .3em;
display: inline;
width: 25%;
background: #d5eeff;
border: 1px solid blue;
height: 22em;
text-align: left;
}

bezugnehmend auf oberen Code.

Deinen Tip schaue ich mir auch gleich noch an!!

Dankeschööönn !!

LG Liz
 
Zurück
Oben