Toon posts:

[CSS] Rare witte rand in IE, niet in FF?

Pagina: 1
Acties:

zaterdag 4 februari 2006 17:26

Acties:

Verwijderd

Topicstarter
Hallo,

Ik heb een probleem met CSS. In IE komt er tussen het menu het de banner een witte rand, bij Firefox is dit niet het geval.Ook snijdt IE het onderste gedeelte van de "g" bij "sponsering" weg.

Allereerst, hier de website zelf.

Screenshots:

Firefox:
Afbeeldingslocatie: http://danielnl.f2g.net/got/vb_ff.jpg

IE:
Afbeeldingslocatie: http://danielnl.f2g.net/got/vb_ie.jpg

Code:

index.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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Welkom op de website!</title>
</head>
<body>
<div id="slice-01">
[img]"images/image_01.gif"[/img]
</div>
<div id="slice-02">
[img]"images/image_02.gif"[/img]
</div>
<div id="slice-03">
[img]"images/image_03.gif"[/img]
</div>
<div id="slice-04">
[img]"images/image_04.gif"[/img]
</div>
<div id="slice-05">
[img]"images/image_05.gif"[/img]
</div>
<div id="slice-06">
[img]"images/image_06.gif"[/img]
</div>
<div id="slice-07">
[img]"images/image_07.gif"[/img]
</div>
<div id="slice-08">
[img]"images/image_08.gif"[/img]
</div>
<div id="slice-09">
[img]"images/image_09.gif"[/img]
</div>
<div id="slice-10">
[img]"images/image_10.gif"[/img]
</div>
<div id="slice-11">
[img]"images/image_11.gif"[/img]
</div>
<div id="slice-12">
[img]"images/image_12.gif"[/img]
</div>
<div id="slice-13">
[img]"images/image_13.gif"[/img]
</div>
<div id="slice-14">
[img]"images/image_14.gif"[/img]
</div>
<div id="slice-15">
[img]"images/image_15.gif"[/img]
</div>
<div id="slice-16">
[img]"images/image_131.gif"[/img]
</div>
<div id="box">Hier komt de tekst. Zoals je in Internet Explorer ziet, zit er een wit rand tussen.<br><br>
Dat is niet het geval in Firefox.

</body>
</html>


stylesheet.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

#slice-01{
position:absolute;
left:0px;
top:0px;
width:198px;
height:93px;
}

#slice-02{
position:absolute;
left:198px;
top:0px;
width:402px;
height:93px;
}

#slice-03{
position:absolute;
left:0px;
top:93px;
width:198px;
heigth:21px;
}

#slice-04{
position:absolute;
left:198px;
top:93px;
width:402px;
heigth:21px;
}

#slice-05{
position:absolute;
left:0px;
top:114px;
width:198px;
heigth:11px;
}

#slice-06{
position:absolute;
left:198px;
top:114px;
width:6px;
heigth:11px;
}

#slice-07{
position:absolute;
left:204px;
top:114px;
width:31px;
heigth:11px;
}

#slice-08{
position:absolute;
left:235px;
top:114px;
width:38px;
heigth:11px;
}

#slice-09{
position:absolute;
left:273px;
top:114px;
width:68px;
heigth:11px;
}

#slice-10{
position:absolute;
left:341px;
top:114px;
width:69px;
heigth:11px;
}

#slice-11{
position:absolute;
left:410px;
top:114px;
width:59px;
height:11px;
}

#slice-12{
position:absolute;
left:469px;
top:114px;
width:74px;
height:11px;
}

#slice-13{
position:absolute;
left:543px;
top:114px;
width:74px;
height:11px;
}

#slice-14{
position:absolute;
top:125px;
left:0px;
width:198px;
height:12px;
}

#slice-15{
position:absolute;
top:125px;
left:198px;
width:402px;
height:12px;
}

#slice-16{
position:absolute;
top:137px;
left:0px;
width:198px;
height:319px;
}

#box{
font-family:Tahoma;
font-size:13;
position:absolute;
top:137px;
left:198px;
background-color:#ffe4c4;
position:absolute;
height:319px;
width:402px;


Wie weet wat het probleem is? Ik ben ten einde raad.

[ Voor 18% gewijzigd door Verwijderd op 04-02-2006 17:27 ]

zaterdag 4 februari 2006 17:39

Acties:
  • TangLeFuzZ
  • Registratie: Juni 2001
  • Laatst online: 15-10-2025

TangLeFuzZ

Na wat verplaatsingen kreeg ik de witte rand wel weg, met deze stylesheet:

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

#slice-01{
position:absolute;
left:0px;
top:0px;
width:198px;
height:93px;
}

#slice-02{
position:absolute;
left:198px;
top:0px;
width:402px;
height:93px;
}

#slice-03{
position:absolute;
left:0px;
top:93px;
width:198px;
heigth:21px;
}

#slice-04{
position:absolute;
left:198px;
top:93px;
width:402px;
heigth:21px;
}

#slice-05{
position:absolute;
left:0px;
top:110px;
width:198px;
heigth:11px;
}

#slice-06{
position:absolute;
left:198px;
top:110px;
width:6px;
heigth:11px;
}

#slice-07{
position:absolute;
left:204px;
top:110px;
width:31px;
heigth:11px;
}

#slice-08{
position:absolute;
left:235px;
top:110px;
width:38px;
heigth:11px;
}

#slice-09{
position:absolute;
left:273px;
top:110px;
width:68px;
heigth:11px;
}

#slice-10{
position:absolute;
left:341px;
top:110px;
width:69px;
heigth:11px;
}

#slice-11{
position:absolute;
left:410px;
top:110px;
width:59px;
height:11px;
}

#slice-12{
position:absolute;
left:469px;
top:110px;
width:74px;
height:11px;
}

#slice-13{
position:absolute;
left:543px;
top:110px;
width:74px;
height:11px;
}

#slice-14{
position:absolute;
top:121px;
left:0px;
width:198px;
height:12px;
}

#slice-15{
position:absolute;
top:121px;
left:198px;
width:402px;
height:12px;
}

#slice-16{
position:absolute;
top:133px;
left:0px;
width:198px;
height:319px;
}

#box{
font-family:Tahoma;
font-size:13;
position:absolute;
top:133px;
left:198px;
background-color:#ffe4c4;
position:absolute;
height:319px;
width:402px;


Vind alleen wel dat je een beetje een vreemde opzet gebruikt, ik zou het anders doen... maar goed, volgens mij moet hij zo wel werken :)

zaterdag 4 februari 2006 17:41

Acties:

Verwijderd

Topicstarter
TangLeFuzZ schreef op zaterdag 04 februari 2006 @ 17:39:
Na wat verplaatsingen kreeg ik de witte rand wel weg, met deze stylesheet:

Vind alleen wel dat je een beetje een vreemde opzet gebruikt, ik zou het anders doen... maar goed, volgens mij moet hij zo wel werken :)
Bedankt! Ik zie toch nog steeds dat de "g" wordt afgesneden, heb je enig idee waarom dit gebeurd?

Zou je wat commentaar kunnen geven over de opzet? Hoe zou jij het doen? (Een heel stylesheet hoeft natuurlijk niet - slechts uitleggen hoe je het zou verbeteren)

[ Voor 9% gewijzigd door Verwijderd op 04-02-2006 17:44 ]

zaterdag 4 februari 2006 17:44

Acties:
  • b19a
  • Registratie: September 2002
  • Niet online

b19a

Geef je body een background met palmboom, kleurtje en verder alle plaatjes-opsmuk. Maak vervolgens een <div> aan waar je het menu (<ul>, <li>) in zet, en je tekst eronder. Met CSS kun je die <div> dan 2 margins geven (left / top) en een width, en je zult zien dat je met zo'n 20 regeltjes code een veel betere opzet hebt!

Voorbeeldcode:
HTML:
1
2
3
4
5
6
7
8
9
10

<!--doctype-->
<html>
  <head><title>Site</title></head>
  <body>
    <div>
      <ul id="menu"><li>alle</li><li>items</li></ul>
      <p>Tekst!</p>
    </div>
  </body>
</html>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11

body {
  background-image: url("palmboom.jpg");
  background-repeat: no-repeat;
}
div {
  margin-left: 100px;
  margin-top: 100px;
}
ul#menu {
  /** pluk zo'n horizontal list code van het net.. */
}


En klaar ben je!

[ Voor 48% gewijzigd door b19a op 04-02-2006 17:47 ]

zaterdag 4 februari 2006 19:14

Acties:

Verwijderd

Vaak betekent zo'n witte rand dat er niets mis is met je codering, maar omdat je tussen elke tag in de code een enter zet.

Zou je eens moeten proberen om de hele code achter elkaar te plakken als 1 lange regel. Dan zul je zien dat die witte rand verdwenen is. Dit is een soort van bug in IE. Dit heb ik ook vaker gehad en FF liet de pagina goed zien, maar IE niet.
Dus dit is het proberen waard in de toekomst.

zaterdag 4 februari 2006 19:24

Acties:
  • ZeilDude
  • Registratie: Juli 2004
  • Laatst online: 19-02-2022

ZeilDude

@TS: kun je voortaan alleen de relevante code posten? Ik zie trouwens liever een linkje naar je site, zodat ik zelf kan zien waar het probleem zit. Iederen die een beetje serieus wat test, weet heus wel de code te achterhalen.

zondag 5 februari 2006 15:17

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op zaterdag 04 februari 2006 @ 19:14:
Vaak betekent zo'n witte rand dat er niets mis is met je codering, maar omdat je tussen elke tag in de code een enter zet.

Zou je eens moeten proberen om de hele code achter elkaar te plakken als 1 lange regel. Dan zul je zien dat die witte rand verdwenen is. Dit is een soort van bug in IE. Dit heb ik ook vaker gehad en FF liet de pagina goed zien, maar IE niet.
Dus dit is het proberen waard in de toekomst.
Ik heb even wat regels weggehaald (offline, online nog niet geupdate omdat ik bezig ben met een PHP gedeelte) en het werkt. Super, bedankt!
ZeilDude schreef op zaterdag 04 februari 2006 @ 19:24:
@TS: kun je voortaan alleen de relevante code posten? Ik zie trouwens liever een linkje naar je site, zodat ik zelf kan zien waar het probleem zit. Iederen die een beetje serieus wat test, weet heus wel de code te achterhalen.
Ik wilde het alleen maar voor iedereen toegankelijk maken, maar voortaan laat ik het wel weg.
Pagina: 1
Reageer