site layout goed in FF en Chrome maar niet in IE (8)

Status
Niet open voor verdere reacties.
I

invictis

Gebruiker
Lid geworden
8 dec 2009
Berichten
17
De titel zegt het al...

http://hetwkspel.resourceful.nl/mapje/Div2kolommen.php

wanneer je de link opent in FF ziet het er goed uit. Doe je dit in IE dan lijkt het nergens op.

Wat doe ik fout?


PHP: 
<LINK HREF="stijl.css" REL="stylesheet" TYPE="text/css">


<div id="main_container">
	<div id="boven_container">

		<div id="logo">
		<?php
		include 'logo.php';
		?>
		</div>
	
		<div id="titel">
		<?php
		include 'titel.php';
		?>
		</div>
	</div>
	<div id="onder_container">
			
		<div id="menu">
		<?php
		include 'menu.php';
		?>
		</div>
				
		<div id="content2">
		<?php
		include 'spelregels.php';
		?>
		
	
	</div>
</div>

en de bijbehorende CSS
PHP: 
TABLE, TABLE TD {border: 1px solid #B22222;}

#noborder, #noborder td {border: 0px solid #B22222;}

#main_container{
width: 100%;
min-height: 100%;
_height: 100%;
margin: -30px 0 0 0;
background-color: #000000;
overflow: hidden;
}

#boven_container{
width: 100%;
height: 125px;
}

#logo{
float: left;
height: 125px;
width: 200px;
background-color: #000000;
}

#titel{
margin-left: 200px;
height: 125px;
text-align: center;
background-image: url('images/backgroundtitel.bmp'); 
}

#onder_container{
width: 100%;
background-image: url('images/fauxcolumns_bg.png') repeat-y; 
background-color: #yellow;
clear: both;
}

#menu{
float: left;
width: 200px;
background-color: #000000;
}

#content2{
margin-left: 200px;
background-image: url('images/background.bmp');
margin: -16 0px 16 200px;
}

#content3{
margin-left: 200px;
background-image: url('images/background.bmp');
margin: -16 250px 16 200px;
}

#twitter{
float: right;
width: 250px;
background-color: #000000;
}

<style>
table.bdr {border:1px solid #B22222}
</style>
 
invictis zei:
Wat doe ik fout?
Klik om te vergroten...
Om te beginnen heb je geen doctype (http://www.w3schools.com/tags/tag_doctype.asp) Dat is wel nodig anders is het voor de browser onduidelijk hoe het document geïnterpreteerd moet worden.

De <body></body> tags zitten niet om de hele inhoud van je site heen

De <html> tags staan er meerdere keren in, dit mag niet. Op de pagina waar ik net naar linkte kun je de basisstructuur van een html pagina zien, als je je daar niet aan houdt kunnen er allerlei dingen misgaan. Het hele begin van je document is nu een grote bende ben ik bang
 
Laatst bewerkt:
Ahh, er is best wat veranderd de afgelopen jaren... doctype kende ik nog niet.. Ik heb de opbouw nu beter gemaakt.
Voor mijn 2 kolommen structuur is het gelukt!

Nu nog de 3 kolommenstructuur aan de praat krijgen (deze is alleen nodig voor de hoofdpagina)
Naast de gebruikelijke kolommen moet er een twitter kolom bij komen...deze schuift echter door naar onderen.
Verder moeten de 3 kolommen alle 3 altijd even lang zijn.. maar voor dat ik daar aan kan beginnen moet ik een 3 kolommen layout hebben.


http://hetwkspel.resourceful.nl/mapje/div6.php

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Het WK Spel 2010</title>
<body>
<LINK HREF="stijl.css" REL="stylesheet" TYPE="text/css">


<div id="main_container">
	<div id="boven_container">

		<div id="logo">
		<?php
		include 'logo.php';
		?>
		</div>
	
		<div id="titel">
		<?php
		include 'titel.php';
		?>
		</div>
	</div>
	<div id="onder_container3">
			<div id="menu">
			<?php
			include 'menu.php';
			?>
			</div>	
			
			<div id="content3">
			<?php
			include 'home.php';
			?>
			</div>	
			<div id="twitter">
			<?php				
			include 'twitter.php';
			?>
			</div>		
	</div>	
</div>			
			
</html>

css

PHP: 
BODY{ font-family: Arial, Helvetica, sans-serif;
           }

TABLE, TABLE TD {border: 1px solid #B22222;}

#noborder, #noborder td {border: 0px solid #B22222;}

#main_container{
width: 100%;
min-height: 100%;
_height: 100%;
margin: -30px 0 0 0;
background-color: #yellow;
}

#boven_container{
width: 100%;
height: 125px;
clear: both;
}

#logo{
float: left;
height: 125px;
width: 200px;
background-color: #000000;
}

#titel{
margin-left: 200px;
height: 125px;
text-align: center;
background-image: url('images/backgroundtitel.bmp'); 
}

#onder_container2{
width: 100%;
background-image: url('images/fauxcolumns_bg.png') repeat-y; 
background-color: #green;
clear: both;
overflow: hidden;
margin: 0px 0px 30px 0px;
}

#onder_container3{
width: 100%;
background-image: url('images/fauxcolumns_bg.png') repeat-y; 
background-color: #green;
clear: both;
overflow: hidden;
margin: 0px 0px 30px 0px;
}

#menu{
float: left;
width: 200px;
//background-color: #purple;
}

#content2{
margin-left: 200px;
background-image: url('images/background.bmp');
margin: -16px 0px 16px 200px;
}

#content3{
margin-left: 200px;
background-image: url('images/background.bmp');
//margin: -16px 250px 16px 200px;
}

#twitter{
float: right;
width: 250px;
background-color: #8F0000;
}


#content_container{
float: left;
//width: 100%;
background-image: url('images/fauxcolumns_bg.png') repeat-y; 
//background-color: #yellow;
//clear: both;
overflow: hidden;
//margin: 0px 0px 0px 0px;
}


#menu_container{
float: left;	
//width: 100%;
background-image: url('images/fauxcolumns_bg.png') repeat-y; 
//background-color: #yellow;
//clear: both;
overflow: hidden;
margin: 0px 0px 0px 0px;
}




<style>
table.bdr {border:1px solid #B22222}
</style>
 
Laatst bewerkt:
invictis zei:
Ahh, er is best wat veranderd de afgelopen jaren... doctype kende ik nog niet.. !
Klik om te vergroten...
Dat bestaat al een tijdje hoor.

invictis zei:
Nu nog de 3 kolommenstructuur aan de praat krijgen (deze is alleen nodig voor de hoofdpagina)
Naast de gebruikelijke kolommen moet er een twitter kolom bij komen...deze schuift echter door naar onderen.
Verder moeten de 3 kolommen alle 3 altijd even lang zijn.. maar voor dat ik daar aan kan beginnen moet ik een 3 kolommen layout hebben.
Klik om te vergroten...
Kolommen kunnen wat lastig zijn inderdaad. Je kunt hier even kijken ter inspiratie.
 
volgens deze link http://net.tutsplus.com/tutorials/h...html5-features-you-should-be-using-right-now/

hebben ze het over dat je tegenwoordig HTML5 hebt waardoor je minder code nodig hebt voor DOCTYPE en <script> en zo.
Zo dat de code opmaak netter en korter is. Helaas is natuurlijk microsoft weer een uitzondering waardoor niet alles werkt.

Ook is er op die site veel te vinden over CSS3.

Ben wel benieuw wat jullie bevindingen over de info van deze site is.

Het is te hopen dat het crossbrowser probleem in de toekomst snel opgelost word!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan