Archief - HTML/CSS: firefox verschilt van IE (en weet niet waarom)

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.
H

HTrance

Legacy Member
Ok ik heb nu iets gemaakt en kben nog maar 10seconden bezig en 'k merk dat firefox 't helemaal kapot maakt :sad: . Hier 't verschil: http://users.telenet.be/HTrance/Downloads/godver-FF-IE.jpg .

Hier de html
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>HTrance</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" href="css-site/index.css" type="text/css"/>
</head>

<body>
	<div class="main_head">
	</div>
	<div class="main">
		<div class="b_menu">
			<div class="b_menu_head"></div>
			<div class="b_menu_t"></div>
		</div>
		
		<div class="s_menu">
			<div class="s_menu_head"></div>
			<div class="s_menu_t"></div>
		</div>
		
		<div class="page">
			<div class="page_head"></div>
			<div class="page_t"></div>
		</div>
	</div>

</body>
</html>

Hier de css:
HTML: 
/* CSS Document */

body{
	background-color: #666666;
	margin: 0px;
	padding: 0px;
}

.main_head{
	position: relative;
	margin: 0px;
	padding: 0px;
	background-image: url(../images-site/main_head.png);
	width: 990px;
	height: 25px;
	margin-left: auto;
	margin-right: auto;
}
.main{
	position: relative;
	margin: 0px;
	padding: 0px 0px 12px 0px;
	background-color: #170057;
	border-left-width: 2px;
	border-left-style: solid;
	border-right-width: 2px;
	border-right-style: solid;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-color: #8D9FD5;
	width: 986px;
	margin-left: auto;
	margin-right: auto;
}

.b_menu{
	position: relative;
	margin: 12px 12px 0px 12px;
	padding: 0px;
	width: 962px;
	height: 160px;
}

.b_menu_head{
	position: relative;
	margin: 0px;
	padding: 0px;
	background-image: url(../images-site/menu_head.png);
	width: 962px;
	height: 25px;
}
.b_menu_t{
	position: relative;
	margin: 0px;
	padding: 0px;
	background-color: #D7E0F1;
	border-left-width: 2px;
	border-left-style: solid;
	border-right-width: 2px;
	border-right-style: solid;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-color: #D7E0F1;
	width: 958px;
	height: 135px;
}

.page{
	position: absolute;
	margin: 12px 0px 0px 0px;
	padding: 0px;
	width: 784px;
	height: 25px;
	right: 12px;
}
.page_head{
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-image: url(../images-site/page_head.png);
	width: 784px;
	height: 25px;
}
.page_t{
	position: relative;
	margin: 0px;
	padding: 0px;
	background-color: #D7E0F1;
	border-left-width: 2px;
	border-left-style: solid;
	border-right-width: 2px;
	border-right-style: solid;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-color: #D7E0F1;
	width: 780px;
	height: 502px;
}

.s_menu{
	position: relative;
	float: left;
	margin: 12px 0px 0px 0px;
	padding: 0px;
	width: 166px;
	height: 527px;
	margin-left: 12px;

}
.s_menu_head{
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-image: url(../images-site/little_head.png);
	width: 166px;
	height: 25px;
}
.s_menu_t{
	position: relative;
	margin: 0px;
	padding: 0px;
	background-color: #D7E0F1;
	border-left-width: 2px;
	border-left-style: solid;
	border-right-width: 2px;
	border-right-style: solid;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-color: #D7E0F1;
	width: 162px;
	height: 502px;
}
g

grooverider

Legacy Member
voor de zoveelste keer: firefox toont uw ontwerp zoals jij het hebt gecode, IE doet er zijn eigen ding mee. Firefox volgt namelijk de voorschriften van het w3c, microsoft vindt dat ze het zelf allemaal beter weten.

Begin dus met je site voor ff te coden, en voeg achteraf een apart stijlblad toe voor ie
H

HTrance

Legacy Member
1) Ja ok, maar dat verklaart niet waarom FF het 'b-menu' wél IN 'main' weergeeft en 'page' en 's-menu' niet (terwijl deze laatsten toch IN main zitte?!).
2) Nergens heb ik gespecifieerd om een leegte te laten tussen main_head en main. En toch doet FF dat.

Tis geen probleem om helemaal code hernieuw te beginnen maar ik zou graag begrijpen wat er verkeerd is aan m'n css...

Thx
g

grooverider

Legacy Member
begin eerst en vooral al met
* {padding: 0; margin: 0;}
ben niet zeker of dat in de body zetten hetzelfde resultaat heeft (ivm overerving)

ook is het altijd handig om je pagina online te zetten, dat zegt veel meer als die paar regeltjes code, en je zal ook veel meer reacties krijgen.
X

Xavez

Legacy Member
Toch even de precieze informatie meegeven: Opera toont je site zoals je hem hebt gecode, indien je hem goed hebt gecode :). Firefox (Gecko) bevat nog een aantal weergavefouten (die vanaf versie 3 verholpen zullen zijn). Ook Safari (Webkit) bevat nog een aantal weergavefouten.
H

HTrance

Legacy Member
Hmm vreemd. Ik denk dat 'k 't al heb opgelost. Alleen is de oplossing niet bevredigend genoeg :/.
1) Alle menu's zitten dan wel in main als ik de hoogte van main instel. Als ik geen hoogte toewijs dan is de hoogte gelijk aan dat van b_menu. Terwijl ik de hoogte van main 't liefst onbepaald wil laten zodat menu's langer en korter kunnen worden en de pagina mee langer en korter wordt...

2) Als ik de margin-top van b_menu verander naar 0 dan krijg ik geen 12px tussen main_head en main( en dus geen lelijke grijze balk). Toch vreemd dat hij de 12px tussen main_head en main zet, terwijl b_menu IN main zit en dus de afstand tussen main en main_head in prinicipe ni kan veranderen :???: .

Heb trouwens de bestanden online gezet. 't oude en verkeerd weergegeven bestand, nu 't aangepaste en goed weergegeven (maar imo niet ideaal gecode) bestand
X

Xcessive-

Legacy Member
no_way2go zei:
http://validator.w3.org :)
Klik om te vergroten...

Wouw da wisten we niet zeg! Dit zegt enkel of het w3c valid is. Het geeft niet aan wat er fout is bij de verschillende browsers.

@HTrance oefen gewoon nog wat meer met css en html en je komt er wel zelf uit. Voor het kleinste foutje hier al een topic gaan openen vind ik belachelijk.
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