|
|||
Modul-Container wird abgeschnitten
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> 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> |
Sponsored Links |
Stichwörter |
css, float, ie7, margin, xhtml |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Positionierung von Container horizontal | mayhemtl | CSS | 9 | 11.08.2007 16:25 |
div container verschachteln | blau | CSS | 2 | 05.12.2006 20:44 |
Container nimmt nicht die Höhe seines Inhalts an | Lestat | CSS | 10 | 04.08.2005 14:47 |
Mitwachsende DIV Container | Myjestic | CSS | 9 | 27.07.2005 18:37 |
Container nebeneimamder statt untereinander | Philippp | CSS | 2 | 20.09.2004 18:59 |