Momenteel ben ik bezig een website te maken, zoveel mogelijk stylen met CSS en fatsoenlijke semantische HTML. Totzover is alles goed gegaan. Ik ben inmiddels al zover dat mijn huidige template hetzelfde resultaat geeft in FireFox (1.0.6) en IE (6.0), zonder al te veel vuile trucjes uit te halen.
Het is een basis header-3 column-footer, gecentereerd, faux columns en een footer die altijd onderaan staat, site. Ik loop nu tegen een probleem aan waarbij het <q> element mijn layout verstoort in Internet Explorer. In mijn middelste kolom staat de daadwerkelijk inhoud, voorbeeld een nieuwsartikel. Maar zodra de text in een <q> element langer is dan de daarvoor gereserveerde lengte 'zakt' de hele kolom naar beneden, totaan de onderkant van de linkerkolom. In firefox is dit niet het geval. De boel zakt niet als de text van <q> korter/gelijkaan de maximale breedte is.
Ik heb al veel CSS-related, IE-bug, websites geraadpleegd, maar geen van de oplossingen die werden aangedragen hebben mij kunnen helpen.
Wat moet ik doen om dit probleem op te lossen?
Hieronder post ik een sample page (bevat zowel CSS als HTML):
Het is een basis header-3 column-footer, gecentereerd, faux columns en een footer die altijd onderaan staat, site. Ik loop nu tegen een probleem aan waarbij het <q> element mijn layout verstoort in Internet Explorer. In mijn middelste kolom staat de daadwerkelijk inhoud, voorbeeld een nieuwsartikel. Maar zodra de text in een <q> element langer is dan de daarvoor gereserveerde lengte 'zakt' de hele kolom naar beneden, totaan de onderkant van de linkerkolom. In firefox is dit niet het geval. De boel zakt niet als de text van <q> korter/gelijkaan de maximale breedte is.
Ik heb al veel CSS-related, IE-bug, websites geraadpleegd, maar geen van de oplossingen die werden aangedragen hebben mij kunnen helpen.
Wat moet ik doen om dit probleem op te lossen?
Hieronder post ik een sample page (bevat zowel CSS als 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
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
174
175
176
177
178
179
180
181
182
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS</title>
<style type="text/css">
/*********************************************
** Overall html, body and main container
*********************************************/
html, body, #holder {
min-height: 100%;
height: 100%;
}
html > body, html > body #holder {
height: auto;
}
body {
margin: 0px;
padding: 0px;
}
#holder {
position: absolute;
width: 750px;
top: 0px;
left: 50%;
margin-left: -375px;
font-family: arial, helvetica, sans-serif;
font-size: small;
color: #333;
background-color: white;
}
/*********************************************
** Header
*********************************************/
#header {
height: 136px;
}
#header h1 {
padding: 0px;
margin: 0px;
}
#header h1 span {
display: none;
}
/*********************************************
** Navigation
*********************************************/
#navleft
{
float: left;
width: 135px;
margin: 0px;
height: auto;
}
#navright
{
float: right;
width: 135px;
margin: 0px;
height: auto;
}
.nav ul {
margin-top: 5px; /* Start 5px from the TOP */
margin-left: 0px; /* IE none indenting */
padding-left: 0px; /* FF none indenting */
font-size: x-small;
line-height: 13px;
}
.nav ul #bypass {
display: none; /* Overslaan, is voor txt only */
}
/*********************************************
** Main content area
*********************************************/
#content {
margin-left: 150px;
padding-top: 5px;
margin-right: 150px;
text-align: justify;
height: 1%; /* IE 3px bugfix */
margin-bottom: 3em;
font-size: 90%;
}
#content h2 {
margin: 0px 0px 12px 0px;
font-size: 22px;
font-weight: bold;
}
#content p {
margin: 0px 0px 10px 0px;
}
/*********************************************
** Footer
*********************************************/
#footer {
clear: both;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
/*********************************************
** Common HTML element styling
*********************************************/
q {
font-style: italic;
}
q:before {
content: open-quote;
color: red;
background-color: white;
}
q:after {
content: close-quote;
color: red;
background-color: white;
}
q:lang(en) {
quotes: "«" "»" '"' '"';
}
blockquote {
color: #333;
background-color: #eeeeee;
}
</style>
</head>
<body>
<div id="holder">
<div id="header"><h1><span>Header</span></h1></div>
<div id="navleft" class="nav">
<ul>
<li id="bypass"><span><a href="/#main">Jump navigation</a></span></li>
<li><span>Blaat1</span>
<ul>
<li>Blaat</li>
</ul>
</li>
</ul>
</div>
<div id="navright" class="nav">
<ul>
<li><span>Blaat2</span>
<ul>
<li>Blaat</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h2>Lorum Ipsum</h2>
<p>Aenean ut purus quis ipsum faucibus pellentesque. Phasellus facilisis consequat erat. Integer at velit non odio tincidunt convallis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer varius justo a lorem. Cras ut orci. Sed aliquam scelerisque quam.</p>
<p><strong>Lorem ipsum</strong></p>
<blockquote><p>In vehicula erat eget nisi. Quisque facilisis, ipsum id convallis sagittis, urna neque imperdiet purus, a posuere lorem nisi vel neque. Suspendisse sed mi. Vestibulum commodo erat eu velit.</p></blockquote>
<p>Etiam cursus. Vivamus lectus enim, nonummy ut, iaculis ac, aliquam eu, lacus.
<q>Etiam cursus. Vivamus lectus enim, nonummy ut, iaculis ac, aliquam eu, lacus. Test.</q>
Cras lobortis. Maecenas at risus. Proin tempus purus et enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</p>
</div>
<div id="footer">Copyright</div>
</div>
</body>
</html> |
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
