Mr.Float: IE Float wird von Container eingeschlossen

Beitrag lesen

SELF-Forum

IE Float wird von Container eingeschlossen

Mr.Float
– Informationen zu den Bewertungsregeln

Hallo Axel,

vielen Dank für Deine Antwort.

Hier mal der 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">  
  
<head>  
<title></title>  
<!-- Meta Tags -->  
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />  
  
<!-- CSS -->  
<link rel="stylesheet" href="css/standard1.css" media="screen,projection" type="text/css" />  
<link rel="stylesheet" href="" media="print" type="text/css" />  
</head>  
  
<body>  
  
<div id="main">  
 <span class="floatleft"></span>  
 <h1>Herzlich Willkommen!</h1>  
 <p>viel text</p>  
 <span class="floatright"></span>  
 <p>nochmal viel text</p>  
 <p><a href="http://www.internet.de" title="Internetseite">http://www.internet.de</a></p>  
</div>  
  
</body>  
</html>

und hier das entsprechende CSS File:

  
body,html {  
background:#000;  
margin:0;  
padding:0;  
}  
  
  
html {display:table;  
 width:100%;  
 height:100%;}  
  
body {display:table-cell;  
 vertical-align:middle;  
 color:#fff;  
 font-size:62.5%;}  
  
#main {margin:auto;  
 border:1px solid #fff;  
 max-width:70em;  
 padding:2em;  
 position:relative;  
}  
  
  
h1 {  
font-size:1.6em;  
line-height: 0.2;  
font-weight:400;  
font-family:"Lucida Sans Unicode", Geneva, arial, sans-serif;  
letter-spacing:2px;  
}  
  
  
p {  
font-size:1.4em;  
}  
  
span.floatleft{  
float:left;  
background-image:url(../images/bild1.jpg);  
width:217px;  
height:75px;  
margin-right: 10px;  
}  
  
  
span.floatright{  
float:right;  
background:#000 url(../images/bild2.jpg) 5px 5px no-repeat;  
width:330px;  
height:190px;  
margin-top:0px;  
margin-left:10px;  
margin-right:20px;  
border-top:1px solid #888;  
border-left:1px dashed #999;  
border-right:1px dashed #999;  
border-bottom:1px solid #aaa;  
padding:5px;  
}  
  
p a {  
color:#fff;  
}  
  
  
/*IE-Korrektur*/  
* html body {margin:10em;font-size:72.5%;width:70em;}

Dank Deinem Tip, mit der Breitenangabe im body-Tag statt im Container, verhält sich das rechts floatende Element nun auch normal.

Der weisse Rand des #main DIV liegt nun allerdings über dem im rechts floatenden Element enthaltenem Bild.

Wie erreiche ich, dass das rechts floatende Element wirklich über dem #main DIV liegt?

Das verändern der Stapelreihenfolge bewirkt hier gar nix.

Beitrag melden
–
Informationen zu den Bewertungsregeln