[HTML/CSS] Firefox uiterlijk probleem.
Ik heb een probleem met mijn website en het probleem ligt 'em in het uiterlijk van firefox.
Ik heb een layout gemaakt in Photoshop, deze hebben ik gesliced etc etc. Nu heb ik alles in elkaar gezet, alleen in Firefox verschuift het menu naar rechts, echter is dit probleem niet in Internet Explorer 7, hier staat het menu netjes in het midden.
Ik dacht in eerste instantie het op te kunnen lossen met margins, alleen verschuift dit weer in Internet Explorer 7.
Mijn CSS:
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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<style type="text/css">
/* INDELING */
body{
text-align: center;
font: 12px;
font-family: Arial;
}
#total {
font-family: Arial;
position: center;
width: 939px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#header {
height: 118px;
width: 939px;
text-align: center;
background-image: url(afbeeldingen/header.gif);
background-repeat: no-repeat;
}
#menu {
margin-left: auto;
margin-right: auto;
height: 37px;
width: 939px;
}
#news {
height: 32px;
width: 939px;
background-image: url(afbeeldingen/boven.gif);
background-repeat: no-repeat;
}
#links {
text-align: left;
float: left;
height: 535px;
width: 12px;
background-image: url(afbeeldingen/links.gif);
background-repeat: no-repeat;
}
#content {
text-align: center;
float: left;
height: 535px;
width: 758px;
background-image: url(afbeeldingen/content.gif);
background-repeat: no-repeat;
}
#rechtsmid {
float: left;
height: 535px;
width: 26px;
background-image: url(afbeeldingen/rechtsmid.gif);
background-repeat: no-repeat;
}
#rechtscontent {
float: left;
height: 535px;
width: 120px;
background-image: url(afbeeldingen/rechts_content.gif);
background-repeat: no-repeat;
}
#rechts {
float: left;
height: 535px;
width: 23px;
background-image: url(afbeeldingen/rechts.gif);
background-repeat: no-repeat;
}
#onder {
float: left;
height: 15px;
width: 939px;
background-image: url(afbeeldingen/onder.gif);
background-repeat: no-repeat;
}
#footer {
font-size: 10px;
height: 14px;
width: 939px;
clear: both;
text-align: center;
}
/* MENU HORIZONTAAL */
ul {
list-style-type: none;
height: 37px;
width: 940px;
margin: 0;
}
li {
margin-left: auto;
margin-right: auto;
float: left;
}
ul a {
text-align: center;
background-image: url(afbeeldingen/btn_normal.gif);
background-repeat: no-repeat;
}
ul li a:hover
{
display:block;
text-align: center;
background-image: url(afbeeldingen/btn_hover.gif);
width: 94;
height: 37;
color: #FFFFFF;
}
ul a:visited
{
display:block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width: 94;
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}
ul a:active
{
display:block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width:94;
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}
ul a:link
{
display: block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width: 94;
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}
</style>
/* INDELING */
body{
text-align: center;
font: 12px;
font-family: Arial;
}
#total {
font-family: Arial;
position: center;
width: 939px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#header {
height: 118px;
width: 939px;
text-align: center;
background-image: url(afbeeldingen/header.gif);
background-repeat: no-repeat;
}
#menu {
margin-left: auto;
margin-right: auto;
height: 37px;
width: 939px;
}
#news {
height: 32px;
width: 939px;
background-image: url(afbeeldingen/boven.gif);
background-repeat: no-repeat;
}
#links {
text-align: left;
float: left;
height: 535px;
width: 12px;
background-image: url(afbeeldingen/links.gif);
background-repeat: no-repeat;
}
#content {
text-align: center;
float: left;
height: 535px;
width: 758px;
background-image: url(afbeeldingen/content.gif);
background-repeat: no-repeat;
}
#rechtsmid {
float: left;
height: 535px;
width: 26px;
background-image: url(afbeeldingen/rechtsmid.gif);
background-repeat: no-repeat;
}
#rechtscontent {
float: left;
height: 535px;
width: 120px;
background-image: url(afbeeldingen/rechts_content.gif);
background-repeat: no-repeat;
}
#rechts {
float: left;
height: 535px;
width: 23px;
background-image: url(afbeeldingen/rechts.gif);
background-repeat: no-repeat;
}
#onder {
float: left;
height: 15px;
width: 939px;
background-image: url(afbeeldingen/onder.gif);
background-repeat: no-repeat;
}
#footer {
font-size: 10px;
height: 14px;
width: 939px;
clear: both;
text-align: center;
}
/* MENU HORIZONTAAL */
ul {
list-style-type: none;
height: 37px;
width: 940px;
margin: 0;
}
li {
margin-left: auto;
margin-right: auto;
float: left;
}
ul a {
text-align: center;
background-image: url(afbeeldingen/btn_normal.gif);
background-repeat: no-repeat;
}
ul li a:hover
{
display:block;
text-align: center;
background-image: url(afbeeldingen/btn_hover.gif);
width: 94;
height: 37;
color: #FFFFFF;
}
ul a:visited
{
display:block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width: 94;
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}
ul a:active
{
display:block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width:94;
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}
ul a:link
{
display: block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width: 94;
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}
</style>
Hier mijn HTML:
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
61
62
63
64
65
66
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
<html>
<head />
<body>
<div id="total">
<!-- RESET HTML SIZE -->
<style type="text/css">
<!--
body{
text-align: center;
margin-right: auto;
margin-left: auto;
background-color: #000000;
}
-->
</style>
<!-- EIND RESET HTML SIZE -->
<div id="header">
</div>
<div id="menu">
<ul>
<li><a href="#" class="ul">Home</a></li>
<li><a href="#" class="ul">Contact</a></li>
<li><a href="#" class="ul">Registreren</a></li>
<li><a href="#" class="ul">Inloggen</a></li>
<li><a href="#" class="ul">Forum</a></li>
<li><a href="#" class="ul">Gastenboek</a></li>
<li><a href="#" class="ul">Test1</a></li>
<li><a href="#" class="ul">Test2</a></li>
<li><a href="#" class="ul">Test3</a></li>
<li><a href="#" class="ul">Test4</a></li>
</ul>
</div>
<div id="news">
</div>
<div id="links">
</div>
<div id="content">
<font class="mid">Welkom op de nieuw site!</font>
</div>
<div id="rechtsmid">
</div>
<div id="rechtscontent">
</div>
<div id="rechts">
</div>
<div id="onder">
</div>
<div id="footer">
<font class="warn">
Blabla bla copyright
</font>
</div>
</div>
</body>
</html>
<head />
<body>
<div id="total">
<!-- RESET HTML SIZE -->
<style type="text/css">
<!--
body{
text-align: center;
margin-right: auto;
margin-left: auto;
background-color: #000000;
}
-->
</style>
<!-- EIND RESET HTML SIZE -->
<div id="header">
</div>
<div id="menu">
<ul>
<li><a href="#" class="ul">Home</a></li>
<li><a href="#" class="ul">Contact</a></li>
<li><a href="#" class="ul">Registreren</a></li>
<li><a href="#" class="ul">Inloggen</a></li>
<li><a href="#" class="ul">Forum</a></li>
<li><a href="#" class="ul">Gastenboek</a></li>
<li><a href="#" class="ul">Test1</a></li>
<li><a href="#" class="ul">Test2</a></li>
<li><a href="#" class="ul">Test3</a></li>
<li><a href="#" class="ul">Test4</a></li>
</ul>
</div>
<div id="news">
</div>
<div id="links">
</div>
<div id="content">
<font class="mid">Welkom op de nieuw site!</font>
</div>
<div id="rechtsmid">
</div>
<div id="rechtscontent">
</div>
<div id="rechts">
</div>
<div id="onder">
</div>
<div id="footer">
<font class="warn">
Blabla bla copyright
</font>
</div>
</div>
</body>
</html>
Voorbeeld:
http://www.zimblox.nl/test.html
Alvast bedankt.
Gewijzigd op 01/01/1970 01:00:00 door Lol lol
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
ul {
list-style-type: none;
height: 37px;
width: 940px;
margin: 0;
padding: 0;
}
list-style-type: none;
height: 37px;
width: 940px;
margin: 0;
padding: 0;
}
edit: uitleg.
IE en FF behandelen sommige elementen verschillend.
FF heeft bijvoorbeeld bij een ul automatisch een bepaalde padding, wanneer deze niet is opgegeven, waar internet explorer dat niet doet.
edit2:
Ik zou met jou design óf de divbox tegen de bovenkant aanzetten, of ronde hoeken gebruiken. Hij zweeft namelijk nu, terwijl hij boven vierkante hoeken heeft, en beneden ronde. Lijkt mij niet de bedoeling.
Om je website tegen de bovenkant aan te zetten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
html{
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
text-align: center;
font: 12px;
font-family: Arial;
}
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
text-align: center;
font: 12px;
font-family: Arial;
}
Gewijzigd op 01/01/1970 01:00:00 door Pieter van Linschoten
Lapidi schreef op 20.04.2009 19:06:
Zou je verder niet zorgen dat je text in het menu in het midden van je knoppen zit, en niet aan de bovenkant, met een "text-align: center".
Dit werkt niet, center is het gedeelte van links naar rechts, niet van top naar bottom.
Klinkt erg dom dit, maar mede dankzij jullie heb ik het probleem gevonden, door de uitleg heb ik bij ul margin: 0; en padding: 0; neergezet, en werkt het nu ook in Firefox.
Met andere woorden, opgelost!
Hartelijk dank voor de reacties.
Gewijzigd op 01/01/1970 01:00:00 door lol lol
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
html, body, div, form
{
margin: 0px;
padding: 0px;
}
div
{
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
}
{
margin: 0px;
padding: 0px;
}
div
{
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
}