Twee div's waarvan één vreemd doet...

gwonline · 26 feb 2008

Hallo,

Ik heb twee div's naast elkaar geplaatst en eindelijk ook de footer op z'n plaats gekregen. Nu heb ik alleen een probleem met de margin-top van een van de div's. In Internet Explorer staan beide precies goed, maar Firefox laat één div verder van de top af zien dan de andere div, terwijl ze toch dezelfde css-stijlen hebben (afgezien van de float). Ik heb al even naar de omliggende div's gekeken en allerlei instellingen geprobeerd, maar ik krijg beide div's niet uitgelijnd in Firefox. Div "rechts" staat goed, maar div "main" niet (staat meer naar beneden dan de opgegeven 35 pixels).

body, html {
color:#000;
margin:0;
padding:0;
font:100% "Georgia";
background-color:#fff;
}

#container {
position:absolute;
width: 100%;
background:url(bgboven.jpg) repeat-x;
}

#head {
width: 800px;
height: 260px;
position: relative;
margin: 30px auto;
background:url(logowebsite.jpg) no-repeat;
}

#midden {
width:100%;
background-color: #F2F0E9;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

#voetnoot {

height:75px;
color:#ccc;
font-size: 0.7em;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#fff;
background-image:url(footer.jpg);
background-position: center top;
margin: auto;
clear:both;

}

#nav1 {font-family: "Arial"; font-size:0.75em; margin:0; line-height:2em; text-align:center;}
#menu ul {list-style-type:none;}
#menu ul li {display:inline; padding-right:0.2em; padding-left:0.2em;}
#menu ul li a {padding:6px; color:#fff;}
#menu ul li a:hover {color:#ffffff; background-color:#7e7149; text-decoration:none;}

#main {
float:right;
margin-top: 30px;
width:540px;
padding-bottom: 25px;
font-size:0.9em;
font-family: "Arial";
}

#rechts {
float:left;
margin-top: 30px;
width:230px;
padding-bottom: 25px;
font-size:0.9em;
font-family: "Arial";
}

#midden1 {
width:800px;
margin: auto;
background-color: #F2F0E9;
}

#leeg {
height:100px;
}

En dit de html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
<head>
<title>[[weblogtitle]]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="de kleibakkers, carnavalsvereniging, carnaval, haalderen, baggergat, 't baggergat, lingewaard" />
<meta name="description" content="Officiële website van carnavalsvereniging De Kleibakkers. Thuisbasis: 't Baggergat (Haalderen, Gelderland)." />
<meta name="robots" content="index" />
<meta name="language" content="dutch" />
<link rel="stylesheet" type="text/css" href="[[template_dir]]cssalgemeen.css" media="screen" />


</head>
<body id="activehome">

<div id="container">
<div id="menu">
<ul id="nav1">
<li><a href="http://www.willembosma.nl/index.php" class="activehome">VOORPAGINA</a></li>
<li><a href="http://www.willembosma.nl/pivot/entry.php?id=8&t=entrypage_werk.html" class="activewerk">FOTO'S</a></li>
<li><a href="http://www.willembosma.nl/pivot/entry.php?id=10&t=entrypage_wieis.html" class="activewie">PRINSEN</a></li>
<li><a href="http://www.willembosma.nl/subweblogs/links/index.php" class="activelinks">JEUGD</a></li>
<li><a href="http://www.willembosma.nl/subweblogs/links/index.php" class="activelinks">GASTENBOEK</a></li>
<li><a href="http://www.willembosma.nl/subweblogs/links/index.php" class="activelinks">AGENDA</a></li>
<li><a href="http://www.willembosma.nl/emailform/" class="activecontact">CONTACT</a></li></ul>
</div>
<div id="head">
<div id="nieuws">
</div>
</div>
<div id="midden">
<div id="midden1">
<div id="rechts">
[[subweblog:standard]]
</div>
<div id="main">
[[subweblog:standard]]
</div>

<div id="leeg">
</div></div>
<div id="voetnoot">
</div>
</div>
</body>
</html>

peter vazed · 26 feb 2008

Ik zie geen verschil..
Wel weet ik dat je je beeldscherm niet kleiner moet trekken.

Tast deze code eens:

HTML:

<style type="text/css" >

body, html {
color:#000;
margin:0;
padding:0;
font:100% "Georgia";
background-color:#a69379;
}

#container {
position:absolute;
width: 100%;
background:url(bgboven.jpg) repeat-x;
border:1px solid #ff0000;
}

#head {
width: 800px;
height: 260px;
position: relative;
margin: 30px auto;
background:url(logowebsite.jpg) no-repeat;
border:1px solid #ff0000;
}

#midden {
width:100%;
background-color: #F2F0E9;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
border:1px solid #ff0000;}

#voetnoot {

height:75px;
color:#ccc;
font-size: 0.7em;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#fff;
background-image:url(footer.jpg);
background-position: center top;
margin: auto;
clear:both;
border:1px solid #ff0000;

}

#nav1 {font-family: "Arial"; font-size:0.75em; margin:0; line-height:2em; text-align:center;}
#menu ul {list-style-type:none;}
#menu ul li {display:inline; padding-right:0.2em; padding-left:0.2em;}
#menu ul li a {padding:6px; color:#fff;}
#menu ul li a:hover {color:#ffffff; background-color:#7e7149; text-decoration:none;}

#main {
float:right;
margin-top: 30px;
width:540px;
padding-bottom: 25px;
font-size:0.9em;
font-family: "Arial";
border:1px solid #ff0000;
}

#rechts {
float:left;
margin-top: 30px;
width:230px;
padding-bottom: 25px;
font-size:0.9em;
font-family: "Arial";
border:1px solid #ff0000;
}

#midden1 {
width:800px;
margin: auto;
background-color: #F2F0E9;
border:1px solid #ff0000;
}

#leeg {
height:100px;
}

</style>

Kun je zien wat de borders en main/rechts doen.

gwonline · 27 feb 2008

Ik heb het gevonden! Het bleek een andere div te zijn: deze stond te ver naar beneden, waardoor de div eronder ook naar beneden werd gedrukt. In ieder geval dank voor het meedenken.

peter vazed · 27 feb 2008

Ja, je kijkt vlot over kleine foutjes heen.
Vandaar dat ik bij fouten een border aan een element toevoeg.
Zie je wat je doet en wat er gebeurt.

Heb je wel je scherm al kleiner getrokken?
Zie je nog wat verschuiven?

gwonline · 27 feb 2008

Wat bedoel je met het scherm kleiner trekken?

keej · 4 mrt 2008

Gewoon browservenster niet gemaximaliseerd laten veronderstel ik, maar verkleinen om te testen wat er dan gebeurt.

Twee div's waarvan één vreemd doet...

gwonline

Gebruiker

peter vazed

Meubilair

gwonline

Gebruiker

peter vazed

Meubilair

gwonline

Gebruiker

keej

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy