Archief - Problemen div positionering

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.

sarnath

Legacy Member
Ik heb een probleem voor met Firefox vb Internet explorer.

Mijn site werkt correct in Firefox maar niet in IE, als ik het in IE kan fixen ziet de site er niet meer uit in Firefox, nu kan ik niet echt vinden hoe ik het moet oplossen aangezien ik het volgens mij toch doen volgens de W3 richtlijnen.


De site bestaat uit een vierkant waarin 4 vierkanten zitten die zowat in de hoeken van het groot vierkant moeten zitten.
Daarvoor is de position van het grote vierkant relatief en die van de vierkantjes erin absoluut, als ik "relatief" wegdoe dan werkt het in Internet Explorer, en in firefox niet, laat ik het staan klopt het in firefox maar niet in IE.


html pagina:
Code:
<html>
<head>
    <link rel="StyleSheet" href="bartleemans_stijl.css" type="text/css" title="layout">
</head>
<body>
<div class="container">

    <div class="top_left">

    </div>
    

    <div class="top_right">

    </div>


    <div class="bottom_left">

    </div>
    

    <div class="bottom_right">

    </div>
</div> 
</body>
</html>


de css pagina:

Code:
.container {
	height:550px;
	width: 600px;
	padding: 4px;
	margin-left:auto; margin-right:auto;
	text-align:center;
	position: relative;
	border:1mm #3d83f6 groove;
}

.top_left {
	border: 1px dashed #FF0000;
	color: #000000;
	text-align: center;
	width: 250px;
	height: 250px;
	float: left;
	background-image:url("top_left.jpg");
	border:1px #C0C0C0 groove;
	position: absolute;
}

.top_right {
	border: 1px dashed #FF0000;
	color: #000000;
	text-align: center;
	width: 250px;
	height: 250px;
	float: left;
	left:350px;
	background-image:url("top_right.jpg");
	border:1px #C0C0C0 groove;
	position: absolute;
}

.bottom_left {
	border: 1px dashed #FF0000;
	color: #000000;
	text-align: center;
	width: 250px;
	height: 250px;
	float: left;
	top:300px;
	background-image:url("bottom_left.jpg");
	border:1px #C0C0C0 groove;
	position: absolute;
}

.bottom_right {
	border: 1px dashed #FF0000;
	color: #000000;
	text-align: center;
	width: 250px;
	height: 250px;
	float: left;
	left:350px;
	top:300px;
	background-image:url("bottom_right.jpg");
	border:1px #C0C0C0 groove;
	position: absolute;
}

Imot3k

Legacy Member
Ik ben het niet zeker maar je kan proberen alle marge en padding op 0 te zetten.
Voeg dit toe aan je stylesheet.

* {margin: 0; padding: 0;}

sarnath

Legacy Member
Dat gaf toch niet het gewenste resultaat.

heb het nu opgelost door bij de linkse boxen te zetten "left:0px;"

het.pc.schaap

Legacy Member
waarom doe je de container met relative? en de divs IN de container met absolute?
ik zou het andersom doen, want als ik dat van jullie door een validator gooi dan geeft ie niet w3c approved....
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