Hallo,
ich habe jetzt schon eine weile probiert, gelesen und rumgesucht konnte mein Problem aber nicht wirklich lösen. Daher Frage ich hier und hoffe dass ihr mir weiterhelfen könnt.
Ich habe mir ein kleines Gridsystem gebastelt das aus Divs als Grid und Modulen besteht. Das Funktioniert soweit auch schon ganz gut. Nur der IE7 macht Probleme. Dort wird der margin-bottom: 10px meiner Module nicht beachtet und einfach abgeschnitten.
Hier erstmal der Code:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<style type="text/css">
.grid1,
.grid2,
.grid3,
.grid4 {
float: left;
}
.grid1 { width: 235px; }
.grid2 { width: 470px; }
.grid3 { width: 705px; }
.grid4 { width: 940px; }
.module1,
.module2,
.module3,
.module4 {
float: left;
margin: 10px 10px;
}
.module1 { width: 215px; }
.module2 { width: 450px; }
.module3 { width: 685px; }
.module4 { width: 920px; }
/*------------------------------------------------------------------------------------------------------*/
.clear:after,
.grid1:after,
.grid2:after,
.grid3:after,
.grid4:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.clear,
.grid1,
.grid2,
.grid3,
.grid4 {
display:block;
}
.clearfix {
display:none;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
/**
* Clearfix Method for containing floats in IE
*
* @workaround
* @see http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/#comment28
* @affected IE 5.x/Win, IE6, IE7
* @css-for IE 5.x/Win, IE6, IE7
* @valid yes
*/
/* ... especial for IE7 */
.clear,
.grid1,
.grid2,
.grid3,
.grid4 {
display: inline-block;
}
/* ... für IE5,IE6,IE7 */
.clear,
.grid1,
.grid2,
.grid3,
.grid4 { display: block; }
/* ... für IE5 + IE6/Win | hasLayout aktivieren */
* html .clear,
* html .grid1,
* html .grid2,
* html .grid3,
* html .grid4 { height: 1%; }
.clearfix {
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
/**
* Doubled Float-Margin Bug
* @see http://positioniseverything.net/explorer/doubled-margin.html
*
* @bugfix
* @affected IE 5.x/Win, IE6
* @css-for IE 5.x/Win, IE6
* @valid yes
*/
.module1,
.module2,
.module3,
.module4 {
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<div class="grid4" style="background-color:red;">
<div class="module2" style="background-color:yellow;">Container 1</div>
<div class="module2" style="background-color:blue;">Container 2</div>
</div>
</body>
</html>
Jetzt habe ich gelesen, dass ich die ganze Sachen wegen dem float clearen muss. Ich dachte das funktioniert über den clear bzw. den grids. Tut es aber nicht.
Also habe ich weiter probiert und habe herausgefunden, wenn ich ein zusätzliches div zum Clearing einfüge, dann tut auch der IE das Richtige.
HTML-Code:
<div class="grid4" style="background-color:red;">
<div class="module2" style="background-color:yellow;">Container 1</div>
<div class="module2" style="background-color:blue;">Container 2</div>
<div class="clearfix"><!-- clear for IE --></div>
</div>
Und nun die Frage an Euch: Ist gibt es eine Lösung ohne zusätzliches Markup? Wie gesagt, die grid-Klassen haben schon die
Easy-Clearing Funktion.
12.08.2009, 19:26
Modul-Container wird abgeschnitten
Ähnliche Themen
Linear-Darstellung
