Ik heb een pagina gemaakt, welke er in internet explorer goed uitziet, maar waarvan ik het niet voor elkaar krijg om deze in firefox goed weer te geven.
In internet explorer wordt de container gecentreerd op het scherm weergegeven, in firefox gebeurd dit niet. Wat kan ik doen om de container in Firefox goed te centreren?
| IE | Firefox |
 | 
|
Hieronder een voorbeeld stukje css/html wat de situatie reproduceerd.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!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" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div id="container">
<div id="frontinnerframe">
<div id="contents">
</div>
</div>
</div>
<div id="iemindimensions">
</div>
</body>
</html> |
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
40
41
42
43
44
45
46
47
48
49
50
51
52
| html, body
{
width: 100%;
height: 100%;
margin: 0; padding: 0;
background-color: #000000;
color: inherit;
}
body
{
position: relative;
min-height: 569px;
min-width: 1690px;
}
#container
{
width: 1680px;
height: 1030px;
border: 0px;
margin: -520px -845px;
position: relative;
top: 50%; left: 50%;
overflow: hidden;
}
#frontinnerframe
{
width: 960px;
height: 564px;
border: 0px solid #000;
margin: 0px 0px;
position: absolute;
top: 233px; left: 360px;
overflow: hidden;
background-color: #CCCCCC;
}
#contents
{
width: 897px;
height: 493px;
border: 0px solid #000;
margin: 0px 0px;
position: absolute;
top: 35px; left: 32px;
overflow: hidden;
background-color: #EEEEEE;
}
#iemindimensions
{
width: 970px;
height: 574px;
margin: 0; padding: 0;
} |
:strip_exif()/u/50656/andre-scholten-avatar.gif?f=community){kind=avatar}
:strip_icc():strip_exif()/u/90747/vogelklein.jpg?f=community)
.
