Archief - xHTML: Firefox probleem

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.

RpR

Legacy Member
Ik heb mijn probleem gelokaliseerd met een test (http://users.skynet.be/bk259983/test/home.htm)

In Internet explorer toont hij wel de achtergrond van de buitenste container.
En past die container hem aan aan de grootte van de elementen binnen zich.

In firefox wordt alleen de top aanzien als een deel van de container en dit omdat deze geen float heeft. Iemand een oplossing voor dit simpel testje?

Site HTML
HTML:
<!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">
	<head>
		<title>&bull; Test &bull;</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="css/home.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="site">
			<div id="top">
			</div>
			<div id="test1">
				test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			</div>
			<div id="test2">
				test2
			</div>
			</div>
		</div>
	</body>
</html>

CSS site
HTML:
body {
    	background-color: #FFFFFF;
	color: #FFFFFF;
	font-family: Verdana, Geneva, Arial;
	font-size: 12px;
	margin: 45px auto 0 auto;
	width: 878px;
	height: 100%;
}
#site {
	width: 878px;
	background: #000000;
	border: 1px solid red;
}
#top {
	background-color: #111111;
	height: 66px;
	width: 878px;
	
}
#test1 {
	background-color: #333333;
	width: 176px;
	float:left;
	
}
#test2 {
	width: 702px;
	float:left;
	color: black;
}

RpR

Legacy Member
Mag slotje op is opgelost door geen float te gebruiken maar met marges te werken.

b0bbY

Legacy Member
een element waarop het float attribuut wordt toegepast krijgt een absolute positionering, vandaar het verschil tussen FF en IE.

Microwaver

Legacy Member
Soms kun je dit 'niet doortrekken' in FireFox oplossen door een div, juist voor de einddiv toe te voegen met een spatie in en deze inhoud als CSS

.reset {
font-size: 1px;
line-height:1px;
margin:0px;
padding:0px;
clear: both;
}

helpt meestal bij het doortrekken van de achtergrond.
of natuurlijk gewoon een tabel gebruiken voor de globale positionering. EN dan de hoogte ergens 100% ingeven
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