sidebar loopt niet door in IE6

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Marcel K

Marcel K

25/02/2007 12:33:00
Quote Anchor link
Ik ben een layout aan het maken en die wil niet zoals ik wil.
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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&euml;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)
PHP script in nieuw venster Selecteer het PHP script
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
/* 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;
}
 
PHP hulp

PHP hulp

26/09/2022 18:44:58
 
Ponzi

Ponzi

25/02/2007 13:14:00
Quote Anchor link
Kan je misschien eens een voorbeeldje geven :-) ? Dan kunnen we gemakkelijker uitvissen wat je juist bedoelt.
 
Marcel K

Marcel K

25/02/2007 19:13:00
Quote Anchor link
Voorbeeld stond erbij, de komplete source ;-)

linkje: http://markt.2mdesign.nl

Bekijken met IE6 en IE7 of FF dan zie je precies wat ik bedoel
 
Marcel K

Marcel K

26/02/2007 20:56:00
Quote Anchor link
bump ;-)
 
Marcel K

Marcel K

27/02/2007 21:56:00
Quote Anchor link
Niemand een hint in de goede richting ?
 
Axel de Mol

Axel de Mol

27/02/2007 23:59:00
Quote Anchor link
Bij mij in Opera scrollt overigens alleen het menu weg, de balk aan de linkerkant blijft op zijn plek staan... vaagjes...
 
Jurgen assaasas

Jurgen assaasas

28/02/2007 00:04:00
Quote Anchor link
je bedoeld dat ding onder search? dit kun je geloof ik oplossen door je DIV een vaste waarde te geven en overigens deze met display als een table/tablecolum laten functioneren

height:500px;
display:table;
 
Marcel K

Marcel K

28/02/2007 00:17:00
Quote Anchor link
Bedankt Jurgen !
Dat was de oplossing.

@axel: ik heb alleen in IE6, IE7 en FF bekeken, heb er geen Opera opstaan..
 
Jurgen assaasas

Jurgen assaasas

28/02/2007 00:21:00
Quote Anchor link
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..


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?
 
Marcel K

Marcel K

28/02/2007 00:42:00
Quote Anchor link
Ik snap even niet dat je het menu niet kan scrollen, de navbar is geen menu wat kan scrollen, zijn alleen knoppen.

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.
 
Jurgen assaasas

Jurgen assaasas

28/02/2007 00:51:00
Quote Anchor link
Dit bedoel ik dus:

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
 
Axel de Mol

Axel de Mol

28/02/2007 06:54:00
Quote Anchor link
Nu werkt hij overigens goed bij mij in opera, gister deed hij nogal raar.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.