CSS: layout in Firefox ok, maar IE niet...

[TheCrow7]

Ik weet dat er hier wel wat CSS wizzards zitten die mij hier zeker een antwoord op zullen kunnen geven.

Ik krijg volgende layout (bekijk deze met Firefox!) niet hetzelfde in IE.

http://home.scarlet.be/~pin12825/css/

Ik krijg beide binnenste vensters wel naast elkaar door de margin te vernauwen, maar sommige margin aanpassingen werken gewoon niet.

Hoe krijg ik dit goed in IE ? En is het mogelijk om hiervoor een stylesheet te maken die met beide browsers werkt ? (Dus zonder individuele sheets).

Thanks.

[Xavez]

Ik weet dat er hier wel wat CSS wizzards zitten die mij hier zeker een antwoord op zullen kunnen geven.

Ik krijg volgende layout (bekijk deze met Firefox!) niet hetzelfde in IE.

http://home.scarlet.be/~pin12825/css/

Ik krijg beide binnenste vensters wel naast elkaar door de margin te vernauwen, maar sommige margin aanpassingen werken gewoon niet.

Hoe krijg ik dit goed in IE ? En is het mogelijk om hiervoor een stylesheet te maken die met beide browsers werkt ? (Dus zonder individuele sheets).

Thanks.

Ik zou het moeten testen, want ik weet het niet meer zo, maar ik denk dat je display: inline ook nog moet toepassen voor IE .

[Xerionth]

Ik heb eventjes uw css aangepast. Normaal moet hij het nu wel doen

body {
	font:				normal 11px Arial, Helvetica, Sans-serif;
	color:				#FFFFFF;
	background-color:	#000000;
}



#container {
	text-align:		left;
	width:			594px;	
	position:		absolute;
	border:			1px solid #ff0000;
	padding:		5px;

}



.mainpane
{
	float: left;
	width: 240px;
	border: 1px dashed #cc0000;
}


.category
{
	width: 220px;
	border: 1px solid #999;
	margin: 5px;
	padding: 5px;
}

Vermoedelijk is het de margin bug die hier toeslaat en natuurlijk ook weer ie die het box model perfect interpreteert

[orez]

1. Geen position relative instellen
2. Waarom float left & right ?

Er is geen reden om float left & right in te stellen, 1 enkele container als float instellen is meer als genoeg.

#container { width: 596px; margin: 0 auto; ... }
#mainpane { float: left; display: inline; ... }
#category { margin: 0; .... }

bovenstaande is basis en ENKEL en alleen over positioning, da zou perfect moeten werken.
Die 0 aan margin bij category verander je natuurlijk naar believen hé.
Probeer ook geen padding toe te voegen aan je boxen, maar geef je element die binnen die boxen komen een margin mee --> Minder kans op slechte interpretatie van het box model door IE. en dan blijft 600 px 600 px, heb je ook meer controle erover.

Nu waarom geen position relative instellen --> de reden is omdat het gewoon nutteloos is, iedere box staat standaard relative infeite. Je moet da maar eens gaan uittesten als je iets relative definieert of niets definieert zal je geen verschil zien

das etzelfde alsdagge voor text uw color als #000 gaan instellen. tis toch standaard altijd zwart hé.
Iedere CSS waarde heeft dan ook een standaard waarde en voor position is dit relative.

@Xerionth position absolute is hier voor niets nodig, enkel echt nodig bij heel rare positionings of als je het zowel verticaal als horizontaal wilt gaan centreren. Als je position absolute gaat hanteren zou ik aanraden om toch nog veel over CSS positioning te gaan lezen en bekijken, want das echt de vuilste en laatste oplossing hoor

[TheCrow7]

Ok, thanks!

Ik ga dat straks even testen.