Heightprobleem in Firefox
Ik zit met een CSS-probleem waar ik tot nu aan toe nog geen oplossing voor heb gevonden, namelijk: Firefox pakt 'height: 100%;' niet, terwijl de body en html ook op height: 100% staan, had ergens gelezen dat dat ook moest (zonder dat werkt het óók niet in Chrome). Maar chrome doet het wel correct.
http://www.imgplace.com/viewimg231/5319/41outputchrome.png
is de output van Chrome
http://www.imgplace.com/viewimg21/8102/62outputfirefox.png
is de output van Firefox
De relevante HTML is
Code (php)
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
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
<div class="msg " id="msg_23">
<div id="left"></div>
<div id="user">
<img src="include/images/useroff.png" />
<a id="posterlink" href="forum.php?profile=1"> Sara</a><br />
Administrator<br />
<img src="include/themes/noble/images/star.png" /><img src="include/themes/noble/images/star.png" /><img src="include/themes/noble/images/star.png" /><img src="include/themes/noble/images/star.png" /><img src="include/themes/noble/images/star.png" /><br />
<img src='avatars/1.gif' style='width: 100px; height: 100px;' /><br />
<span id="little_date_text">Posts: 1<br /><br />
<a href="forum.php?profile=1&twitter"><img src="include/images/twitter.png" /></a>
</span><br /><br />
</div>
<div id="post" >
<span style="float: right" class="quickedit"></span>
<img style = "float: left;margin: 2px;" src="include/boardicons/2.png" /><b>Norway and Sweden</b><br />
<span id="little_date_text">
Posted on: <b>Today</b> at 08:25
</span><br /><br />
Above the herd argues the glory, Why won't any mint alcoholic swallow the narrative radio?<br />
The tiger essays a history. Whatever loaded anecdote marks the approval opposite the shaky spectacular. Will the doomed courage repair the lesbian? How can a parked misuse horn the awkward saint? A largest equilibrium glows. Beside my freezing bone pretends the quit grammar.<br />
Opposite the analyst pretends norway. Sweden leads the snack in the acorn. A buffer outrages norway. How can a bananas crown eye sweden? The paradise misinterprets a havoc underneath your apparent ignorance
<div id="signature">
<i>Wie geen vreemde talen kent, snapt niets van zijn eigen taal.</i><br />
Det er bra vr i dag, sa mannen, han sto i garasjen
</div>
</div>
</div>
<div id="left"></div>
<div id="user">
<img src="include/images/useroff.png" />
<a id="posterlink" href="forum.php?profile=1"> Sara</a><br />
Administrator<br />
<img src="include/themes/noble/images/star.png" /><img src="include/themes/noble/images/star.png" /><img src="include/themes/noble/images/star.png" /><img src="include/themes/noble/images/star.png" /><img src="include/themes/noble/images/star.png" /><br />
<img src='avatars/1.gif' style='width: 100px; height: 100px;' /><br />
<span id="little_date_text">Posts: 1<br /><br />
<a href="forum.php?profile=1&twitter"><img src="include/images/twitter.png" /></a>
</span><br /><br />
</div>
<div id="post" >
<span style="float: right" class="quickedit"></span>
<img style = "float: left;margin: 2px;" src="include/boardicons/2.png" /><b>Norway and Sweden</b><br />
<span id="little_date_text">
Posted on: <b>Today</b> at 08:25
</span><br /><br />
Above the herd argues the glory, Why won't any mint alcoholic swallow the narrative radio?<br />
The tiger essays a history. Whatever loaded anecdote marks the approval opposite the shaky spectacular. Will the doomed courage repair the lesbian? How can a parked misuse horn the awkward saint? A largest equilibrium glows. Beside my freezing bone pretends the quit grammar.<br />
Opposite the analyst pretends norway. Sweden leads the snack in the acorn. A buffer outrages norway. How can a bananas crown eye sweden? The paradise misinterprets a havoc underneath your apparent ignorance
<div id="signature">
<i>Wie geen vreemde talen kent, snapt niets van zijn eigen taal.</i><br />
Det er bra vr i dag, sa mannen, han sto i garasjen
</div>
</div>
</div>
De relevante CSS is
Code (php)
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
53
54
55
56
57
58
59
60
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
53
54
55
56
57
58
59
60
html
{
height: 100%;
}
body
{
min-height: 100%;
height: 100%;
}
.msg
{
overflow: auto;
margin: 8px;
margin-bottom:10px;
margin-top:10px;
border: 1px #616073 solid;
border-bottom: 10px solid #616073;
border-top: 10px solid #616073;
display: table;
width: 99%;
overflow: overlay
}
.msg #post
{
position: relative;
padding: 12px;
padding-left: 20px;
color: black;
margin-right: 10em;
margin-left: 4em;
min-height: 168px;
}
.msg #left
{
display: block;
padding-right: 13px;
padding-top: 23px;
width: 4em;
background: url('images/catbar5.png');
overflow: overlay;
float: left;
border-right: 1px solid #616073;
margin-right: 6px;
height: auto;
overflow: auto;
}
.msg #user, .post #user
{
display: block;
padding-left: 13px;
padding-top: 23px;
float: right;
width: 10em;
background: url('images/catbar5.png');
height: 100%;
vertical-alignement: bottom;
overflow: overlay;
border-left: 1px solid #616073;
margin-left: 6px;
}
{
height: 100%;
}
body
{
min-height: 100%;
height: 100%;
}
.msg
{
overflow: auto;
margin: 8px;
margin-bottom:10px;
margin-top:10px;
border: 1px #616073 solid;
border-bottom: 10px solid #616073;
border-top: 10px solid #616073;
display: table;
width: 99%;
overflow: overlay
}
.msg #post
{
position: relative;
padding: 12px;
padding-left: 20px;
color: black;
margin-right: 10em;
margin-left: 4em;
min-height: 168px;
}
.msg #left
{
display: block;
padding-right: 13px;
padding-top: 23px;
width: 4em;
background: url('images/catbar5.png');
overflow: overlay;
float: left;
border-right: 1px solid #616073;
margin-right: 6px;
height: auto;
overflow: auto;
}
.msg #user, .post #user
{
display: block;
padding-left: 13px;
padding-top: 23px;
float: right;
width: 10em;
background: url('images/catbar5.png');
height: 100%;
vertical-alignement: bottom;
overflow: overlay;
border-left: 1px solid #616073;
margin-left: 6px;
}
Gewijzigd op 14/09/2011 20:24:32 door Thomas de Roo
Gewijzigd op 14/09/2011 20:23:30 door Thomas de Roo