Archief - HTML/CSS: css div stretched niet mee in FF wel in IE

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
L

Linwe

Legacy Member
Hey guys,

Klein css probleempje. Ik probeer volgende situatie te creëeren:

_Header
_Stretchable body
_Footer

Dit alles met een standaard "body" hoogte van laat ons zeggen 400px.
Met volgende css stretched alles mooi in IE7, in firefox daarentegen loopt de text gewoon onder/over m'n kaders door en blijft het "body" gedeelte op 400px staan. Iemand enig idee ?

HTML: 
<html>
	<head>
		<style>
			body { font-size:10px; font-family:Verdana; margin:0px; }
			#header, #body, #menu, #galleries { margin: 5px; border:1px solid #000000; width:500px; margin:auto;}
			
			#header { height:50px; }
			#menu   { height:20px; }
			#body		{ height:400px; }
			#galleries { height:100px; }
			#main-container {  text-align:center; margin-top:10px;  }
		</style>
	</head>
	
	<body>
		<div id="main-container">
			<div id="header">_header</div>
			
			<div id="body">
			  dit gedeelte moet stretchen
			</div>
			
			<div id="menu">_menu</div>
			
			<div id="galleries">_galleries</div>
		</div>
	</body>
</html>
D

Devastate

Legacy Member
body geen vaste grootte geven?
een voorbeeldje zou handig zijn (dev = lamzak)
L

Linwe

Legacy Member
De body geen vaste grootte geven is geen optie want ik wil dat die altijd, ook al staat er maar een beetje text in, 400 px hoog is (of whatever)

Een beter copy paste voorbeeld is dit mss, heb jammer genoeg geen webspace atm. Heb het voorbeeld aangepast naar een body height van 200 px, daarin x-aantal br's... pagina openen in ff en ie geeft een ander resultaat. Ik zou dus graag hebben dat ff het opdezelfde manier stretched als dat IE dat doet...

HTML: 
<html>
	<head>
		<style>
			body { font-size:10px; font-family:Verdana; margin:0px; }
			#header, #body, #menu, #galleries { margin: 5px; border:1px solid #000000; width:500px; margin:auto;}
			
			#header { height:50px; }
			#menu   { height:20px; }
			#body		{ height:200px; }
			#galleries { height:100px; }
			#main-container {  text-align:center; margin-top:10px;  }
		</style>
	</head>
	
	<body>
		<div id="main-container">
			<div id="header">_header</div>
			
			<div id="body">
				xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>
				xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>
				xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>xxx <br/>
			</div>
			
			<div id="menu">_menu</div>
			
			<div id="galleries">_galleries</div>
		</div>
	</body>
</html>
D

Disco_Dave

Legacy Member
UnD3RD0G zei:
min-height is wel niet compatible met IE7-
Klik om te vergroten...

Normaal kan IE7 wel min-height aan, IE6 heeft hier problemen mee.

Ik los het probleem meestal met een kleine hack op

voor de gewone browsers gebruik je dus idd min-height maar omdat dit dus niet werkt voor IE6 moet je voor IE6 height gebruiken. Nu moet je die height nog wel verbergen voor de goede browsers anders streched je div niet meer mee. Je krijgt dus dit:

.someclass{
min-height:400px;
*height:400px; //verbergen voor goede browsers, IE6 leest dit wel
}

Probeer het eens zou ik zo zeggen.
L

Linwe

Legacy Member
zalig, in FF en IE7 werkt dat alleszins ! Een vies truckje, maar het werkt ;)
Thx guys
L

L0|2|23

Legacy Member
De ster (*) is voor IE7 en lager, gebruik liever een underscore (_) voor IE6 en lager. Of je declareert eerst de ster hack en daarna de min-height (IE6 en lager zal die dan negeren). En die 400px lijkt me wel heel arbitrair, ik zou eens zoeken naar een meer generische oplossing (mss mbv floats en clears).
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan