Hallo,

Ik heb last van een onverklaarbaar stukje ruimte en ik zou niet weten of het nou ergens mankeert in de pagina zelf HTML of het gelinkte CSS.

De HTML-pagina:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

	<div id="header">
						<h3> HEADER EN LOGO</h3>
	</div>
    <div id="navigation">
    					<ul>
                        		<li><a href="#">HOME</a></li>
                                <li><a href="#">PAGINA 1</a></li>
                                <li><a href="#">PAGINA 2</a></li>
                        </ul>
	</div>
    <div id="content">
    					<h4>Kop content</h4>
                        <p>Content</p>
                                                                                                                                                          </p>
    </div>
    
    <div id="footer">
    					FOOTER
    </div>
</div>

</body>
</html>




En het CSS (style1.css):



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


div#container{
width: 750px;
margin: 0 auto 0 auto;
background-color:#E6F0F2;
padding: 0px;
}

div#header {
margin: 0;
background-color:#FBFFBF;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000066;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}

div#navigation {
margin: 0;
text-align:center;
background-color:#3399FF;
}

div#content {
margin: 0;
background-color:#C9E4E4;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000099;
padding-left:10px;
text-align:left;
padding-bottom:20px;
}

div#footer {
margin: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:10px;
text-align:center;
padding-top:2px;
padding-bottom:2px;
background-color:#000066;
}

h3 {
font-size:12px;
}

ul a:link, ul a:visited{
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}

ul a:hover, ul a:active{
color: #FFFFFF;
text-decoration: underline;
font-weight:bold;
}

ul{
font-family:Verdana, Arial, Helvetica, sans-serif;
list-style: none;
margin: 0;
padding: 5px 0 0 0;
}

li{
margin: 0;
padding: 0 15px 0 15px;
display: inline;
text-align:center;
}


Alle browsers (behalve het Designgedeelte van Dreamweaver) renderen deze pagina met een ruimte tussen de navigatie-div en de content-div.

Ik snap er geen reet van, kan iemand me vertellen wat ik fout doe?

Voorbeeld: http://i50.tinypic.com/mj1tw0.jpg


Gr. Edward
Opgelost:

Een conflict met:


  <div id="content">
    					<h3>Kop content</h3>
    <p>Content</p>
    </div>


Na een <br /> doet ie het ineens wel goed, heel vreemd.

Dus zo:


 <div id="content">
    					<br /><h3>Kop content</h3>
    <p>Content</p>
    </div>
zet margin:0px; padding:0px; op je H4 element.
Tha Wizekid schreef op 12.12.2009 19:57
Of gebruik gewoon een reset.css
Gebruik ik ook altijd ;), maar niet zo uitgebreid. Ik reset alleen het padding/margin overal.
Stefan schreef op 12.12.2009 18:59
zet margin:0px; padding:0px; op je H4 element.


Och jah, dat kan natuurlijk ook. Scheelt me weer die lelijke <br />

Thanks.
Edward schreef op 12.12.2009 21:43
[quote='Stefan schreef op 12.12.2009 18:59']zet margin:0px; padding:0px; op je H4 element.


Och jah, dat kan natuurlijk ook. Scheelt me weer die lelijke <br />

Thanks.[/quote]
Alle H & P elementen hebeen of margin of padding, dus als je nog steeds onverklaarbare ruimte hebt, gewoon margin:0px; padding:0px; op gooien.
Paradox™ schreef op 12.12.2009 20:26
[quote='Tha Wizekid schreef op 12.12.2009 19:57']Of gebruik gewoon een reset.css
Gebruik ik ook altijd ;), maar niet zo uitgebreid. Ik reset alleen het padding/margin overal.[/quote]
Ik reset altijd gewoon alles, omdat ook bij bijv. tables e.d. browsers dit vaak niet 100% hetzelfde doen.
Om gewoon met een "schone lei" te beginnen gebruik ik ook altijd een uitgebreide "reset.css". Dit maakt het crossbrowser bouwen van een website/ lay-out toch al een stuk gemakkelijker.

Reageren