Font bold in FF, IE maar niet in Chrome
Ik heb nogal een aardig probleem. Ik ben momenteel een design aan het slicen en ging is een kijkje nemen in wat verschillende browsers. In chrome zag ik mooi wat ik wou, maar tot mijn verbazing zie ik in Internet Explorer en FireFox dat het font veel dikker is dan in chrome. Ik heb geen idee waar de fout juist zit.
Ik vermoed dat jullie genoeg hebben aan de CSS code. Ik geef ze helemaal, aangezien ik niet weet waar de fout zit.
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
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
html, body {
height: 100%;
padding: 0;
margin: 0;
background-image: url(c/bg.png);
background-repeat: repeat-x;
background-color: #6496B4;
}
body {
/* background: o repeat-y top right; */
text-align: center;
}
/* IE7 Fix */
* html #container {
display: table;
height: 100%
}
/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}
#container {
height: 100%;
height: auto !important;
min-height: 100%;
width: 734px;
margin: 0 auto;
text-align: left;
background-image: url(c/content_bg.jpg);
background-repeat: repeat-y;
}
#main {
overflow: auto;
padding-bottom: 100px;
}
/* Header */
#header {
width: 734px;
height: 163px;
background-image: url(c/bg.png);
background-repeat: repeat-x;
}
#boat_top {
background-image: url(c/boat_top.jpg);
background-repeat: no-repeat;
width: 112px;
height: 118px;
margin-top: 21px;
float: left;
}
#boat_bottom {
background-image: url(c/boat_bottom.jpg);
background-repeat: no-repeat;
width: 112px;
height: 24px;
float: left;
}
#logo {
background-image: url(c/logo.jpg);
background-repeat: no-repeat;
width: 176px;
height: 68px;
margin-top: 71px;
margin-right: 446px;
float: right;
}
#top {
background-image: url(c/header_top.jpg);
background-repeat: no-repeat;
width: 604px;
height: 24px;
margin-right: 18px;
float: right;
}
#body {
overflow: hidden;
height: 100%;
}
#container_left {
width: 549px;
}
#right-sidebar {
width: 167px;
float: right;
margin-left: -100px;
}
#footer {
background-color: #71A4C2;
position: relative;
height: 34px;
margin-top: -35px;
clear: both;
}
#footer p {
margin: 0;
padding: 0;
}
#menu {
background-image: url(c/menu.jpg);
background-repeat: repeat-x;
height: 35px;
}
#menu ul {
margin:0;
padding: 5px 0 0 38px;
}
#menu ul li{
display:inline;
margin:0 4px;
}
#menu ul li a{
font-family: Tahoma,Calibri,Verdana,Geneva,sans-serif;
font-size: 16px;
color: #FFF;
text-decoration: none;
text-shadow: 0 0 1px #fff,0 0 1px #fff 0 0 1px #fff,0 0 1px #fff
text-transform:capitalize
}
#menu ul li a:hover{
color: #79AAC6;
text-shadow: 0 0 1px #79aac6,0 0 1px #79aac6 0 0 1px #79aac6,0 0 1px #79aac6
padding-bottom: 1px;
border-bottom: 2px solid #6898B1;
}
#content_top {
background-image: url(c/content_top.jpg);
background-repeat: repeat-x;
height: 91px;
width: 549px;
margin-left: 25px;
}
#content_top h1,
#right-sidebar h1 {
font-family: Tahoma,Calibri,Verdana,Geneva,sans-serif;
font-size: 20px;
color: #FFF;
font-weight: normal;
text-shadow: 0 0 100px #fff 0 0 100px #fff
margin: 0;
padding: 29px 0 0 16px;
}
#right-sidebar h1 {
padding:0;
color: #97B7C7;
text-transform:uppercase;
font-style: italic;
}
p.content {
width: 508px;
display: block;
color: #FFF;
margin: -24px 0 0 41px;
font-family: Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
font-size: 10pt;
text-align: justify;
}
height: 100%;
padding: 0;
margin: 0;
background-image: url(c/bg.png);
background-repeat: repeat-x;
background-color: #6496B4;
}
body {
/* background: o repeat-y top right; */
text-align: center;
}
/* IE7 Fix */
* html #container {
display: table;
height: 100%
}
/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}
#container {
height: 100%;
height: auto !important;
min-height: 100%;
width: 734px;
margin: 0 auto;
text-align: left;
background-image: url(c/content_bg.jpg);
background-repeat: repeat-y;
}
#main {
overflow: auto;
padding-bottom: 100px;
}
/* Header */
#header {
width: 734px;
height: 163px;
background-image: url(c/bg.png);
background-repeat: repeat-x;
}
#boat_top {
background-image: url(c/boat_top.jpg);
background-repeat: no-repeat;
width: 112px;
height: 118px;
margin-top: 21px;
float: left;
}
#boat_bottom {
background-image: url(c/boat_bottom.jpg);
background-repeat: no-repeat;
width: 112px;
height: 24px;
float: left;
}
#logo {
background-image: url(c/logo.jpg);
background-repeat: no-repeat;
width: 176px;
height: 68px;
margin-top: 71px;
margin-right: 446px;
float: right;
}
#top {
background-image: url(c/header_top.jpg);
background-repeat: no-repeat;
width: 604px;
height: 24px;
margin-right: 18px;
float: right;
}
#body {
overflow: hidden;
height: 100%;
}
#container_left {
width: 549px;
}
#right-sidebar {
width: 167px;
float: right;
margin-left: -100px;
}
#footer {
background-color: #71A4C2;
position: relative;
height: 34px;
margin-top: -35px;
clear: both;
}
#footer p {
margin: 0;
padding: 0;
}
#menu {
background-image: url(c/menu.jpg);
background-repeat: repeat-x;
height: 35px;
}
#menu ul {
margin:0;
padding: 5px 0 0 38px;
}
#menu ul li{
display:inline;
margin:0 4px;
}
#menu ul li a{
font-family: Tahoma,Calibri,Verdana,Geneva,sans-serif;
font-size: 16px;
color: #FFF;
text-decoration: none;
text-shadow: 0 0 1px #fff,0 0 1px #fff 0 0 1px #fff,0 0 1px #fff
text-transform:capitalize
}
#menu ul li a:hover{
color: #79AAC6;
text-shadow: 0 0 1px #79aac6,0 0 1px #79aac6 0 0 1px #79aac6,0 0 1px #79aac6
padding-bottom: 1px;
border-bottom: 2px solid #6898B1;
}
#content_top {
background-image: url(c/content_top.jpg);
background-repeat: repeat-x;
height: 91px;
width: 549px;
margin-left: 25px;
}
#content_top h1,
#right-sidebar h1 {
font-family: Tahoma,Calibri,Verdana,Geneva,sans-serif;
font-size: 20px;
color: #FFF;
font-weight: normal;
text-shadow: 0 0 100px #fff 0 0 100px #fff
margin: 0;
padding: 29px 0 0 16px;
}
#right-sidebar h1 {
padding:0;
color: #97B7C7;
text-transform:uppercase;
font-style: italic;
}
p.content {
width: 508px;
display: block;
color: #FFF;
margin: -24px 0 0 41px;
font-family: Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
font-size: 10pt;
text-align: justify;
}
Bedankt!
Write Down
Code (php)
1
font-weight: bold;
PHP Scripter op 05/08/2011 17:33:22:
Code (php)
1
font-weight: bold;
Uuh nee? Dat staat nergens in de CSS... Heb jij wel gelezen, ik weel geen bold?
Toevoeging op 05/08/2011 17:36:45:
Write Down op 05/08/2011 17:36:13:
Uuh nee? Dat staat nergens in de CSS... Heb jij wel gelezen, ik wil geen bold?
PHP Scripter op 05/08/2011 17:33:22:
Code (php)
1
font-weight: bold;
Uuh nee? Dat staat nergens in de CSS... Heb jij wel gelezen, ik wil geen bold?
font-size: 14px;
Is het bold nu verdwenen?
Sommige lettertypes lijken bold als ze groter zijn dan een bepaald aantal pixels.
font-size: 10px;
Ik heb ook even het geprobeerd met 10px, maar ook dan blijft het nog bold.
Toevoeging op 05/08/2011 18:36:57:
Ook zou je kunnen proberen om .content een font-weight: normal; mee te geven.
In chrome is het inderdaad correct, in de andere genoemde browsers niet. font-weight heb ik al even geprobeerd, maar ook dat baat niet. Heven ook even in de body wat zaken gezet, maar ook dat helpt niet.
Toevoeging op 06/08/2011 13:37:29:
Ik heb zonet een XP-VM opgestart, en daar ziet het er wel wat beter uit... Vreemd. Ik zal even nog is een Windows 7 VM installeren.
Gewijzigd op 06/08/2011 13:37:56 door Write Down
Het heeft iets met de rendering van het lettertype te maken. Als je daar op zoekt ben je niet de enige. ;)
Toevoeging op 06/08/2011 14:33:52:
Tot hier toe nog niets gevonden.