Anders in IE dan FF

**Jimmy W** · 01-03-2010, 06:07

Beste SD-rs

Ik heb het volgende probleem:

Code:

body {
background: #3a8309 url('bg.jpg') repeat-x;
margin-top: 0px;
}

.Header {
align: center;
margin-top: auto;
width: 900px;
heigt: 150px;
border-width: 0px 1px 5px 1px;
border-color: #000; 
border-style: solid;
margin-left:auto;
margin-right:auto;
}

Dit zorgt ervoor dat de div met de header erin in het midden van de pagina staat, maar

In Fire Fox staat hij niet tegen de bovenkant van de pagina aan, en in Internet Explorer wel.

Hoe kan dit?

**Raymond Nijland** · 01-03-2010, 06:17

Heb je een online voorbeeld?

**Jimmy W** · 01-03-2010, 06:19

Nee niet online helaas, ik kan wel een screenshot of de .html code plaatsen...

het is net de basis wat ik (oefen) aan het maken ben dus echt veel code is er niet,

enigste wat niet lukt is hem tegen de boven kant van de pagina plaatsen wat in IE wel lukt :S

**Raymond Nijland** · 01-03-2010, 06:23

screenshot helpt nooit echt wat, beter is de html en css code

**Jimmy W** · 01-03-2010, 06:26

CSS:

Code:

body {
background: #3a8309 url('bg.jpg') repeat-x;
margin-top: 0px;
}

.container {
    width: 900px;
    height: 160px;
    margin-left: auto;
    margin-right: auto;
}

.Header {
    align: center;
    margin-top: auto;
    width: 900px;
    height: 160px;
    border-width: 0px 1px 5px 1px;
    border-color: #000;
    border-style: solid;
    margin-left: auto;
    margin-right: auto;
}

HTML:

Code:

<!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-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head>
<body>
<div class="container">
<div class="Header">
<p align="center"><img src="header.gif" width="900" height="160" align="top"></p>
</div>


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

Meer is er niet

**Raymond Nijland** · 01-03-2010, 06:43

Oke paar dingen maak van de container en header classes gewoon id's van, oke heeft niets te doen met je probleem meer van netjes cssen.

En waarschijnlijk zit je met default margin en paddings van de browser probeer eens

*{
margin: 0;
padding: 0;
}

in je css te zetten, merk op dat je later een element zoals p weer een margin-bottom moet geven aangezien * alles matcht en dus overal de padding en margin weg haalt.

**Jimmy W** · 01-03-2010, 06:53

Dit werkt inderdaad wel.

Maar is dit ook de beste/juiste oplossing?

**Aeilko Bos** · 01-03-2010, 07:07

wat gebeurt er al je margin-top:auto; weghaald?
Dit bestaat volgens mij niet, of doet niks!

**Raymond Nijland** · 01-03-2010, 07:07

Ja, dan kloot je nooit weer met default browser stylesheet verschillen zoals met margins en paddings
Aanvullend bericht:

Origineel gepost door Aeilko Bos

wat gebeurt er al je margin-top:auto; weghaald?
Dit bestaat volgens mij niet, of doet niks!

Zie w3c css reference http://www.w3.org/TR/CSS2/box.html#propdef-margin-top iets naar boven scollen tot je 8.3 ziet staan.

margin-top:auto bestaat zeker wel maar auto werkt nogal complex om het uit te leggen :)

**gast17649** · 01-03-2010, 07:36

Code:

    margin-left: auto;
    margin-right: auto;

Veranderen naar dit btw: (stuk netter)

Code:

    margin: 0px auto;

Verder bij de header, align:center; weghalen.. :-)

Anders in IE dan FF