Toon posts:

[CSS] Absolute positionering (mozilla <> IE)

Pagina: 1
Acties:

zaterdag 7 februari 2004 17:20

Acties:
  • xentar
  • Registratie: Februari 2003
  • Laatst online: 18-09-2025

xentar

Topicstarter
Ik ben bezig met een website op te bouwen met enkel divs en css. Nu ben ik al zover dat het in Mozilla correct staat, maar in IE is het nog een zooitje. Het ligt volgens mij aan de absolute positionering van de div #inhoud. In Mozilla gaat die wel tot op 35px van de bottom van de div #container, maar in IE dus niet :(
Hoe kan ik dit het beste aanpakken dat die het wel zou doen?
De Css:
code:
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

html{
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
body {
    background-image: url(layout/bodybg.gif);
    font:0.8em Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
#container {
    background-image: url(layout/divbg.gif);
    background-repeat: repeat-y;
    padding-left:17px;
    padding-right:17px;
    margin-left: auto;
    margin-right: auto;
    width: 750px;
    height:100%;
}
#header {
    background-image: url(layout/top.jpg);
    top:0px;
    background-repeat: no-repeat;
    height: 100px;
    width: 750px;
}
#knoppen {
    background-image: url(layout/knoppen.jpg);
    height: 30px;
    width: 750px;
}
#inhoud {
    background-image: url(layout/inhoudbg.gif);
    width:738px;
    padding-left:6px;
    padding-right:6px;
    position:absolute;
    top:135px;
    bottom:35px;
    overflow:visible;
}
#gastenboek1 {
    background-image: url(layout/gastenboek-1.jpg);
    background-repeat: no-repeat;
    height: 33px;
    width: 566px;
    float:left;
}
#gastenboek2 {
    background-image: url(layout/gastenboek-2.jpg);
    background-repeat: no-repeat;
    width: 157px;
    height: 33px;
    float:right;
}
#kader1 {
    border-left: 1px solid #BC7000;
    border-right: 1px solid #BC7000;
    background-color: #FBF7F1;
    width: 554px;
    padding: 5px;
    text-align:justify;
    position:absolute;
    top:33px;
    left:6px;
    bottom:9px;
    overflow:auto;
}
#kader2 {
    border-left: 1px solid #BC7000;
    border-right: 1px solid #BC7000;
    background-color: #FBF7F1;
    width: 149px;
    padding:3px;
    text-align:justify;
    position:absolute;
    top:33px;
    right:6px;
    bottom:129px;
    overflow:auto;
}
#rand1{
    background-image:url(layout/rand1.gif);
    background-repeat: no-repeat;
    width: 566px;
    height: 9px;
    position:absolute;
    left:6px;
    bottom:0px;
}
#rand2{
    background-image:url(layout/rand2.gif);
    background-repeat: no-repeat;
    width: 157px;
    height: 9px;
    bottom:120px;
    right:6px;
    position:absolute;
}
#logo {
    height: 115px;
    width: 135px;
    background-repeat: no-repeat;
    background-image: url(layout/logo.jpg);
    position:absolute;
    left:586px;
    bottom:0px;
}
#footer {
    position:absolute;  
    bottom:0px;
    height: 35px;
    width: 750px;
    background-image: url(layout/bottom.jpg);
    background-repeat: no-repeat;
}

De html:
code:
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

<body>
<div id="container">
    <!--#include file="header.asp" -->
    <div id="inhoud">
    
        <div id="gastenboek1"></div>
        <div id="gastenboek2"></div>
        <div id="kader1">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus placerat eros nec dui. 
                Morbi id erat in lacus.</p>
            <p>cidunt vestibulum eros. Integer consequat risus vel justo. Cum sociis natoque penatibus et magnis dis
                 parturient montes, nascetur ridiculus mus. Proin ullamcorper malesuada tortor.</p>
            <p>cidunt vestibulum eros. Integer consequat risus vel justo. Cum sociis natoque penatibus et magnis dis 
                parturient montes, nascetur ridiculus mus. Proin ullamcorper malesuada tortor.</p>
            <p>cidunt vestibulum eros. Integer consequat risus vel justo. Cum sociis natoque penatibus et magnis dis 
                parturient montes, nascetur ridiculus mus. Proin ullamcorper malesuada tortor.</p>
            <p>Cras molestie massa ut ante. Ut elit. Curabitur dignissim suscipit pede. Pellentesque habitant morbi 
                tristique senecnetium placerat sapien. Cras non odio eu augue vestibulum ultricies. Pellentesque arcu 
                lacus, malesuada ac, dapibus non, dapibus sed, velit. Nunc nec turpis.</p>
        </div>
        <div id="kader2">
            <ul>
                <li>Cras molestie</li>
                <li>massa ut ante</li>
                <li>Ut elit.</li>
            </ul>
        </div>
        <div id="rand1"></div>
        <div id="rand2"></div>
        <div id="logo"></div>
        
    </div>
    <div id="footer"></div>
</div>
</body>

Alles staat hier online.

http://www.zelan.be

zaterdag 7 februari 2004 17:47

Acties:

Verwijderd

Zover ik weet zit er een verschil tussen absolute positionering in IE en mozila.
Zo denkt mozila dat het absolute object absolute gepositioneerd staat aan de body (wat logisch is). Echter denkt IE dat het absolute staat aan het ouderelement.

Dit is mijn kennis over het verschil in redentatie. Ik dat je zelf moet gaan zitten tweaken tot dat je een ons weegt. Of probeer wat gebruik te maken van tabelen. Deze zijn tenminste wel gelijk in redenatie.

zaterdag 7 februari 2004 17:52

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 08:20

crisp

Devver

Pixelated

geef je #container eens een position:relative

Intentionally left blank

zaterdag 7 februari 2004 18:12

Acties:
  • Johnny
  • Registratie: December 2001
  • Laatst online: 27-05 16:10

Johnny

ondergewaardeerde internetguru

Het is in zo'n geval ook handig als je MSIE hetzelfde box-model wilt laten gebruiken als Mozilla moet je de pagina een Strict DTD geven. Dat werkt trouwens alleen in versie 6.

Omgekeerd kun je Mozilla het box-model van MSIE laten gebruiken door dit in je CSS te zetten:
code:
1
2
3
4

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zaterdag 7 februari 2004 18:22

Acties:
  • Genoil
  • Registratie: Maart 2000
  • Laatst online: 12-11-2023

Genoil

Johnny schreef op 07 februari 2004 @ 18:12:
Het is in zo'n geval ook handig als je MSIE hetzelfde box-model wilt laten gebruiken als Mozilla moet je de pagina een Strict DTD geven. Dat werkt trouwens alleen in versie 6.

Omgekeerd kun je Mozilla het box-model van MSIE laten gebruiken door dit in je CSS te zetten:
code:
1
2
3
4

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
Ik zou eerder voor content-box gaan, een browser als Safari kan alleen daar mee overweg (of heb ik nou nog niet goed genoeg gezocht ;)). Voor IE5+ kun je dan een CSS hack gebruiken. Pas wanneer CSS3 een beetje breed geaccepteerd is kun je imo pas echt een box model kiezen mbv box-sizing...

zaterdag 7 februari 2004 18:32

Acties:

Verwijderd

Indeed, zeker dat soort 'extensies' zorgen voor problemen. Nu is het volgens mij wel zeker dat deze property het gaat halen als REC.
Pagina: 1
Reageer