zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Modul-Container wird abgeschnitten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.08.2009, 19:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2009
Beiträge: 2
nautic befindet sich auf einem aufstrebenden Ast
Standard 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>
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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.08.2009, 10:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2009
Beiträge: 2
nautic befindet sich auf einem aufstrebenden Ast
Standard

Kann mir keiner helfen?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, float, ie7, margin, xhtml

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Positionierung von Container horizontal mayhemtl CSS 9 11.08.2007 15:25
div container verschachteln blau CSS 2 05.12.2006 19:44
Container nimmt nicht die Höhe seines Inhalts an Lestat CSS 10 04.08.2005 13:47
Mitwachsende DIV Container Myjestic CSS 9 27.07.2005 17:37
Container nebeneimamder statt untereinander Philippp CSS 2 20.09.2004 17:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:31 Uhr.