Toon posts:

Top margin van Div valt weg in Firefox.

Pagina: 1
Acties:

Verwijderd

Topicstarter
Hallo,

Ik ben bezig met een kleine portfolio website voor een kennis. Het is voor mij de eerste keer dat ik serieus met webpagina's dus ik ben nog aan het leren.

Ik heb een simpel ontwerp in Photoshop met een header, een content-gedeelte, een side-menu, en een footer. Deze wil ik met CSS en div' jes maken.

Voor de header heb ik een class(weet niet of het zo heet) aangemaakt die ik een top-margin van 10px geef. Deze header is in een andere div genest genaamd page. De top margin van 10px is wel in IE te zien maar niet in Firefox. Zie onderstaand codevoorbeeld.


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*  Begin typography & colors */
body {
    
    font-family: arial;
    background-color: #333333;
    color: #748084;
}

#page {
    background-color: #bdb5a3;
    text-align: center;
}

#header {
    text-align: center;
    border: 1px solid #000000;
}

#content{
    border: 1px solid #000000;
}

/*  End typography & colors */



/*  Begin structure */
#page {
    width: 900px;
    height: 700px;
    margin: 100px auto;
}
    
#header {
    border: 1px solid #959596;
    margin: 10px;
    }

/*  End structure */


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>Homage</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="page">
    
    <div id="header">
        <p>This is the header</p>
    </div>
    
</div>

</body>
</html>


Ik heb de div'jes een border gegeven om ze zichtbaar te maken.

De header zou nu aan alle kanten een margin van 10px moeten hebben. In IE (of in design weergave van dreamweaver) is de top-margin wel te zien. In Firefox niet.

Iemand een idee?

[ Voor 11% gewijzigd door Verwijderd op 16-11-2007 13:58 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 08:46

crisp

Devver

Pixelated

Firefox doet het goed, de margin van #header collapsed met die van #page

Intentionally left blank


Verwijderd

Topicstarter
Hoe kan ik dit oplossen dan?

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 08:46

crisp

Devver

Pixelated

Margin-collapsing is te voorkomen door in dit geval #page een border, padding of overflow anders dan 'auto' te geven.

Intentionally left blank


Verwijderd

Topicstarter
Okay, dank je wel.

Ik eens even wat proberen.