Layout verschil
Hallo, ik heb een klein stukje code waarmee ik al een tijd zit te knoeien. Het gaat om dit stuk:
de css code:
De "div.fblokken" zijn allemaal ongeveer hetzelfde alleen een andere background.
In Mozilla heeft deze code geen problemen maar in explorer wel:
image
Weet iemand wat ik misschien verkeerd doe, ik heb al verschillende dingen geprobeerd maar niets bleek het probleem te verhelpen.
Mvg Joachim
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div class="forumleft"><span></span></div>
<div class="forum">
<div class="fblok1">sqqsdffffffffffffqs</div>
<div class="line"><span></span></div>
<div class="fblok2">sdfsdq</div>
<div class="line"><span></span></div>
<div class="fblok3">sdfsdq</div>
<div class="line"><span></span></div>
<div class="fblok4">sdfsdq</div>
</div>
<div class="forumright"><span></span></div>
<div class="forum">
<div class="fblok1">sqqsdffffffffffffqs</div>
<div class="line"><span></span></div>
<div class="fblok2">sdfsdq</div>
<div class="line"><span></span></div>
<div class="fblok3">sdfsdq</div>
<div class="line"><span></span></div>
<div class="fblok4">sdfsdq</div>
</div>
<div class="forumright"><span></span></div>
de css code:
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
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
div.forumleft
{
position:absolute; /* Will zeggen dat je ernaast kan veder bouwen */
background-image: url('../images/threats_left.gif');
width:6px;
height:140px;
margin-left:1px;
}
div.forumright
{
background-image: url('../images/threats_right.gif');
width:6px;
height:140px;
margin-left:152px;
}
div.forum
{
width: 146px;
height:140px;
position: absolute;
margin-left:6px;
}
div.forum div.line
{
width : 146px;
height:4px;
background-image: url('../images/lijn_read.gif');
}
div.fblok1
{
background: url('../images/bg_forum1.gif');
height: 34px;
}
{
position:absolute; /* Will zeggen dat je ernaast kan veder bouwen */
background-image: url('../images/threats_left.gif');
width:6px;
height:140px;
margin-left:1px;
}
div.forumright
{
background-image: url('../images/threats_right.gif');
width:6px;
height:140px;
margin-left:152px;
}
div.forum
{
width: 146px;
height:140px;
position: absolute;
margin-left:6px;
}
div.forum div.line
{
width : 146px;
height:4px;
background-image: url('../images/lijn_read.gif');
}
div.fblok1
{
background: url('../images/bg_forum1.gif');
height: 34px;
}
De "div.fblokken" zijn allemaal ongeveer hetzelfde alleen een andere background.
In Mozilla heeft deze code geen problemen maar in explorer wel:
image
Weet iemand wat ik misschien verkeerd doe, ik heb al verschillende dingen geprobeerd maar niets bleek het probleem te verhelpen.
Mvg Joachim
Gewijzigd op 01/01/1970 01:00:00 door Joachim vanthuyne
Reset file doet wonderen.
Of je kan voor beiden iets anders maken met additional comments.
Of je kan voor beiden iets anders maken met additional comments.
'wouter:
Reset file doet wonderen.
Of je kan voor beiden iets anders maken met additional comments.
Of je kan voor beiden iets anders maken met additional comments.
Wat bedoel je met reset file.
Ik zal je deze even voor posten
Nu kan het wel goed zijn dat je nog heel wat opnieuw gaat moeten aanpassen.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*
Yahoo CSS reset file
http://developer.yahoo.com/yui/reset/#code
Kleine aanpassing: Jan Koehoorn
*/
html { font-size: 100%; }
body { font: 62.5%/1em Georgia, "Times New Roman", Times, serif;}
html, body, div,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, select, option, textarea,
p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code,
dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
q:before, q:after { content: '"'; }
abbr, acronym { border: 0; }
:focus { outline: 0; }
Yahoo CSS reset file
http://developer.yahoo.com/yui/reset/#code
Kleine aanpassing: Jan Koehoorn
*/
html { font-size: 100%; }
body { font: 62.5%/1em Georgia, "Times New Roman", Times, serif;}
html, body, div,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, select, option, textarea,
p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code,
dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
q:before, q:after { content: '"'; }
abbr, acronym { border: 0; }
:focus { outline: 0; }
Nu kan het wel goed zijn dat je nog heel wat opnieuw gaat moeten aanpassen.
Gebruik floats ipv position:absolute en google als het dan nog niet lukt op box model hack voor IE.
Kheb er vertrouwen in!
Kheb er vertrouwen in!




