sidebar loopt niet door in IE6
In IE6 loopt de sidebar niet door tot onderaan, in IE7 en FF wel.
Wie weet hiervoor een hack ?
Misschien heeft Jan Koehoorn nog een leuke oplossing ?
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>2Market Place </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Kopen en verkopen van goederen" />
<meta name="keywords" content="auto, boeken, computer" />
<link href="../styles/style.css" rel="stylesheet" type="text/css" media="screen,projection" />
</head>
<body>
<div id="container">
<div id="header">
<h1>2Marktplaats</h1>
<h3>Project om een soort marktplaats te maken als oefening met diverse techniekjes </h3>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Informatie</a></li>
<li><a href="#">Nieuw</a></li>
<li><a href="#">Plaats advertentie</a></li>
<li><a href="#">Mijn advertenties</a></li>
<li><a href="#">Registreren</a></li>
<li><a href="#">Inloggen</a></li>
</ul>
</div>
<div id="content">
<p>Project om een soort marktplaats te maken als oefening met diverse techniekjes </p>
<p>De categorin aan de linkerzijde komen al uit de database.<br />
Eerst maar eens een goed ledensysteem maken.</p>
</div>
<div id="subcontent">
<div id="searchbar"><h2>Zoeken</h2>
<form action="#" method="get"><fieldset>
<input value="demo only" name="s" id="s" alt="not functional, demo only" />
<input type="submit" value="Go!" id="searchbutton" name="searchbutton" />
</fieldset></form>
</div>
<h2>Categoriën</h2>
<ul class="menublock">
<li><a href=#>boeken</a></li>
<li><a href=#>computers</a></li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>2Market Place </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Kopen en verkopen van goederen" />
<meta name="keywords" content="auto, boeken, computer" />
<link href="../styles/style.css" rel="stylesheet" type="text/css" media="screen,projection" />
</head>
<body>
<div id="container">
<div id="header">
<h1>2Marktplaats</h1>
<h3>Project om een soort marktplaats te maken als oefening met diverse techniekjes </h3>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Informatie</a></li>
<li><a href="#">Nieuw</a></li>
<li><a href="#">Plaats advertentie</a></li>
<li><a href="#">Mijn advertenties</a></li>
<li><a href="#">Registreren</a></li>
<li><a href="#">Inloggen</a></li>
</ul>
</div>
<div id="content">
<p>Project om een soort marktplaats te maken als oefening met diverse techniekjes </p>
<p>De categorin aan de linkerzijde komen al uit de database.<br />
Eerst maar eens een goed ledensysteem maken.</p>
</div>
<div id="subcontent">
<div id="searchbar"><h2>Zoeken</h2>
<form action="#" method="get"><fieldset>
<input value="demo only" name="s" id="s" alt="not functional, demo only" />
<input type="submit" value="Go!" id="searchbutton" name="searchbutton" />
</fieldset></form>
</div>
<h2>Categoriën</h2>
<ul class="menublock">
<li><a href=#>boeken</a></li>
<li><a href=#>computers</a></li>
</ul>
</div>
</div>
</body>
</html>
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
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
183
184
185
186
187
188
189
190
191
192
193
/* Stylesheet */
*{margin:0; padding:0;}
body{
font:76% Verdana,Tahoma,Arial,sans-serif;
line-height:1.4em;
text-align:center;
color:#303030;
}
a{
color:#467aa7;
font-weight:bold;
text-decoration:none;
background-color:inherit;
}
a:hover{color:#2a5a8a; text-decoration:none; background-color:inherit;}
a img{border:none;}
p{padding:0 0 1.6em 0;}
p form{margin-top:0; margin-bottom:20px;}
img.left,img.center,img.right{padding:4px; border:1px solid #a0a0a0;}
img.left{float:left; margin:0 12px 5px 0;}
img.center{display:block; margin:0 auto 5px auto;}
img.right{float:right; margin:0 0 5px 12px;}
/**************** Header and navigation styles ****************/
#container{
width:99.5%;
margin:0px auto;
padding:1px 0;
text-align:left;
background:#ffffff;
color:#303030;
}
#header{
height:110px;
width:100%;
margin:0 0px 1px 0px;
background-color:#FFCC66;
color:#505050;
}
#header h1{
padding:35px 0 0 20px;
font-size:2.4em;
background-color:inherit;
color:#505050;
letter-spacing:-2px;
font-weight:normal;
}
#header h2{
margin:10px 0 0 40px;
font-size:1.4em;
background-color:inherit;
color:#505050;
letter-spacing:-1px;
font-weight:normal;
}
#header h3{
margin:10px 0 0 40px;
font-size:1.1em;
background-color:inherit;
color:#505050;
letter-spacing:-1px;
font-weight:normal;
}
#navigation{
height:2.2em;
line-height:2.2em;
width:100%;
margin: 0 1 1 1px;
background-color:#FFCC66;
color:#ffffff;
color:#505050;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color:#505050;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#FF6600;
color:#fff;
text-decoration:none;
}
/**************** Content styles ****************/
#content{
float:right;
width:810px;
margin-left:180px;
font-size:0.9em;
padding:10px 0 0 10px;
position:fixed;
}
#content h2{
display:block;
margin:0 0 16px 0;
font-size:1.7em;
font-weight:normal;
letter-spacing:-1px;
color:#505050;
background-color:inherit;
}
#content h2 a{font-weight:normal;}
#content h3{margin:0 0 5px 0; font-size:1.4em; letter-spacing:-1px;}
#content a:hover,#subcontent a:hover{text-decoration:underline;}
#content ul,#content ol{margin:0 5px 16px 35px;}
#content dl{margin:0 5px 10px 25px;}
#content dt{font-weight:bold; margin-bottom:5px;}
#content dd{margin:0 0 10px 15px;}
/**************** Sidebar styles ****************/
#subcontent{
float:left;
clear:right;
width:150px;
height:100%;
padding:10px 20px 10px 10px;
line-height:1.4em;
border-right: 1px solid #CCCCCC;
background-color:#FFCC66;
position:fixed;
margin:1px 0 0 0px;
}
#subcontent h2{
display:block;
margin:0 0 15px 0;
font-size:1.6em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#505050;
background-color:inherit;
}
#subcontent p{margin:0 0 16px 0; font-size:0.9em;}
/**************** Menublock styles ****************/
.menublock{margin:0 0 10px 10px; font-size:0.9em;}
.menublock li{list-style:none; display:block; padding:0px; margin-bottom:0px;}
.menublock li a{font-weight:bold; text-decoration:none;}
.menublock li a:hover{text-decoration:none;}
.menublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.menublock li ul li{margin-bottom:0;}
.menublock li ul a{font-weight:normal;}
/**************** Searchbar styles ****************/
#searchbar{margin:0 0 10px 0;}
#searchbar form fieldset{margin-left:0px; border:0 solid;}
#searchbar #s{
height:1.2em;
width:100px;
margin:0 5px 0 0;
border:1px solid #a0a0a0;
}
#searchbar #searchbutton{
width:auto;
padding:0 1px;
border:1px solid #808080;
font-size:0.9em;
text-align:center;
}
*{margin:0; padding:0;}
body{
font:76% Verdana,Tahoma,Arial,sans-serif;
line-height:1.4em;
text-align:center;
color:#303030;
}
a{
color:#467aa7;
font-weight:bold;
text-decoration:none;
background-color:inherit;
}
a:hover{color:#2a5a8a; text-decoration:none; background-color:inherit;}
a img{border:none;}
p{padding:0 0 1.6em 0;}
p form{margin-top:0; margin-bottom:20px;}
img.left,img.center,img.right{padding:4px; border:1px solid #a0a0a0;}
img.left{float:left; margin:0 12px 5px 0;}
img.center{display:block; margin:0 auto 5px auto;}
img.right{float:right; margin:0 0 5px 12px;}
/**************** Header and navigation styles ****************/
#container{
width:99.5%;
margin:0px auto;
padding:1px 0;
text-align:left;
background:#ffffff;
color:#303030;
}
#header{
height:110px;
width:100%;
margin:0 0px 1px 0px;
background-color:#FFCC66;
color:#505050;
}
#header h1{
padding:35px 0 0 20px;
font-size:2.4em;
background-color:inherit;
color:#505050;
letter-spacing:-2px;
font-weight:normal;
}
#header h2{
margin:10px 0 0 40px;
font-size:1.4em;
background-color:inherit;
color:#505050;
letter-spacing:-1px;
font-weight:normal;
}
#header h3{
margin:10px 0 0 40px;
font-size:1.1em;
background-color:inherit;
color:#505050;
letter-spacing:-1px;
font-weight:normal;
}
#navigation{
height:2.2em;
line-height:2.2em;
width:100%;
margin: 0 1 1 1px;
background-color:#FFCC66;
color:#ffffff;
color:#505050;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color:#505050;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#FF6600;
color:#fff;
text-decoration:none;
}
/**************** Content styles ****************/
#content{
float:right;
width:810px;
margin-left:180px;
font-size:0.9em;
padding:10px 0 0 10px;
position:fixed;
}
#content h2{
display:block;
margin:0 0 16px 0;
font-size:1.7em;
font-weight:normal;
letter-spacing:-1px;
color:#505050;
background-color:inherit;
}
#content h2 a{font-weight:normal;}
#content h3{margin:0 0 5px 0; font-size:1.4em; letter-spacing:-1px;}
#content a:hover,#subcontent a:hover{text-decoration:underline;}
#content ul,#content ol{margin:0 5px 16px 35px;}
#content dl{margin:0 5px 10px 25px;}
#content dt{font-weight:bold; margin-bottom:5px;}
#content dd{margin:0 0 10px 15px;}
/**************** Sidebar styles ****************/
#subcontent{
float:left;
clear:right;
width:150px;
height:100%;
padding:10px 20px 10px 10px;
line-height:1.4em;
border-right: 1px solid #CCCCCC;
background-color:#FFCC66;
position:fixed;
margin:1px 0 0 0px;
}
#subcontent h2{
display:block;
margin:0 0 15px 0;
font-size:1.6em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#505050;
background-color:inherit;
}
#subcontent p{margin:0 0 16px 0; font-size:0.9em;}
/**************** Menublock styles ****************/
.menublock{margin:0 0 10px 10px; font-size:0.9em;}
.menublock li{list-style:none; display:block; padding:0px; margin-bottom:0px;}
.menublock li a{font-weight:bold; text-decoration:none;}
.menublock li a:hover{text-decoration:none;}
.menublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.menublock li ul li{margin-bottom:0;}
.menublock li ul a{font-weight:normal;}
/**************** Searchbar styles ****************/
#searchbar{margin:0 0 10px 0;}
#searchbar form fieldset{margin-left:0px; border:0 solid;}
#searchbar #s{
height:1.2em;
width:100px;
margin:0 5px 0 0;
border:1px solid #a0a0a0;
}
#searchbar #searchbutton{
width:auto;
padding:0 1px;
border:1px solid #808080;
font-size:0.9em;
text-align:center;
}
linkje: http://markt.2mdesign.nl
Bekijken met IE6 en IE7 of FF dan zie je precies wat ik bedoel
height:500px;
display:table;
Dat was de oplossing.
@axel: ik heb alleen in IE6, IE7 en FF bekeken, heb er geen Opera opstaan..
Daddy M schreef op 28.02.2007 00:17:
Bedankt Jurgen !
Dat was de oplossing.
@axel: ik heb alleen in IE6, IE7 en FF bekeken, heb er geen Opera opstaan..
Dat was de oplossing.
@axel: ik heb alleen in IE6, IE7 en FF bekeken, heb er geen Opera opstaan..
als het goed is slide hij ook automatisch mee als hij langer wordt dan 500px(omdat hij als table functioneert).
Overigens in Opera kan ik het menu niet scrollen maar de gehele site, heb je toevallig absolute postion gebruikt?
het "menu" in de zijbalk zijn maar 2 opties op dit moment dus dat zal niet scrollen.
Zoals je in de source hierboven kunt zien heb ik geen absloute position gebruikt, wel fixed.
als ik naar beneden scroll(let goed op de scrollbar rechts en het menu links)
http://84.41.201.193/operascrolldown.JPG
en als ik niet scroll dan ziet hetr er gewoon keurig uit zoals het hoort:
http://84.41.201.193/operanietscroll.JPG