abonnement Unibet Coolblue
pi_62901797
Vorige topics:

[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deeltje 8
[CSS] voor dummies - deel 9

En we gaan hier lekker verder

Gelijk maar even mijn 1e vraag.

Ik moet een site ook wekend krijgen onder IE6, nu heb ik een div layer die over een design heen valt, echter komen de pulldowns er gewoon doorheen, de rest niet. Wat kan ik hier tegen doen?
Just say hi!
  maandag 3 november 2008 @ 10:46:31 #2
26400 wijsneus
Radicaal Democraat
pi_62902403
Dit is een algemeen bekend probleem van IE.

In Windows is alles wat je zo'n beetje op het scherm ziet een 'Windows control'. Een applicatie heeft bijvoorbeeld een knop nodig, en vraagt aan Windows: geef mij een knop. Het OS tekent vervolgens de knop.

Nu is IE een beetje een vreemde eend in de bijt. Die heeft namelijk zelf code om allerlei dingen te tekenen. Dus, in plaast van aan het OS te vragen om een input boxje, tekent IE deze zelf. Hierdoor kan IE zelf de volgorde van elementen bepalen en bijvoorbeeld divjes over knoppen en inputs heen tekenen.

Je voelt hem al aankomen: niet alles is geimplementeerd. Waaronder dus de 'select' box. Hier vraag IE wel aan windows om hem voor hem te regelen.

Oplossing? Hij is er, maar die is echt verscrhikkelijk.

Met javascript alle elementen die je over een select-box heen wilt tekenen in hun eigen iframe stoppen. Tenminste, dat deden wij vroeger toen we nog menuutjes deden in pure javscript.
“There’s class warfare, all right, but it’s my class, the rich class, that’s making war, and we’re winning.”
― Warren Buffett
pi_62902987
Krijg steeds minder respect voor Microsoft wat een onzin, maar goed, een iframe zou een oplossing moeten zijn maar hoe moet ik deze dan benutten? het is namelijk erg vervelend
Just say hi!
  maandag 3 november 2008 @ 11:30:00 #4
26400 wijsneus
Radicaal Democraat
pi_62903493
Het is geen oplossing, het is een hack. Wij genereerden vroeger drop-down menus in javascript. De truuk was dan om in de div van het menu een iframe te genereren en daar dan weer de menuitems in te plaatsen. Dan ging ie over de drop-downs heen omdat een iframe ook een windowed control is.

Dus, binnen de div een iframe plaatsen, die even hoog en breed is als de div en geen scrollbars heeft.

Omdat wij dat allemaal met javscript deden, gingen we gewoon dingen in de document.body van die frame write()-en maar dat is mogelijk voor jou geen oplossing.

Ik denk dat je gewoon moet accepteren dat je site in IE er anders uitziet.

Je zou de select kunnen vervangen door radio buttons.
“There’s class warfare, all right, but it’s my class, the rich class, that’s making war, and we’re winning.”
― Warren Buffett
pi_62903885
Helaas kan ik de selects niet vervangen, maar de iframe optie zou moeten werken, zal eens kijken hoe ik dit kan oplossen. Iig vriendelijk bedankt voor je volledige omschrijving!
Just say hi!
pi_62903939
Als je al jquery in je site gebruikt kun je bijv gebruik maken van:
http://plugins.jquery.com/project/bgiframe

Of anders even verder zoeken, er zijn heel wat paginas over te vinden
pi_62945509
schopje richting MyAT.
pi_62992087
quote:
Op maandag 3 november 2008 11:49 schreef spaceninjapirate het volgende:
Als je al jquery in je site gebruikt kun je bijv gebruik maken van:
http://plugins.jquery.com/project/bgiframe

Of anders even verder zoeken, er zijn heel wat paginas over te vinden
Ik heb dus gezocht naar een simpele oplossing maar kon er helaas geen vinden, is er geen oplossing waarbij dynamisch een div een iframe kan omvatten?

Anyone? jquery kan ik niet gebruiken omdat ik te veel vergelijkbare functies in mijn scripting heb
Just say hi!
pi_63024137
Ik heb al een fix gevonden, die zeer simpel is ;)

http://www.actionscript.org/forums/showthread.php3?t=132324

oftewel

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
<html>
<head>
<script type="text/javascript">
     // make the specified div a windowed control in IE6
     // this masks an iframe (which is a windowed control) onto the div,
     // turning the div into a windowed control itself
     function makeWindowed(p_div)
     {
        var is_ie6 =
           document.all && 
           (navigator.userAgent.toLowerCase().indexOf("msie 6.") != -1);
        if (is_ie6)
        {
           var html =
              "<iframe style=\"position: absolute; display: block; " +
              "z-index: -1; width: 100%; height: 100%; top: 0; left: 0;" +
              "filter: mask(); background-color: #ffffff; \"></iframe>";
           if (p_div) p_div.innerHTML += html;
           // force refresh of div
           var olddisplay = p_div.style.display;
           p_div.style.display = 'none';
           p_div.style.display = olddisplay;
        };
     }
</script>
</head>
<body>
<div id="test" style="position: absolute; z-index: 2; 
top: 50; left: 30; width: 200px; height: 200px; 
background-color: red">
 
</div>
<select style="position: absolute; z-index: 1; top: 50;">
<option>test</option>
</select>
<a href="javascript:makeWindowed(document.getElementById('test'));">
Make Windowed</a>
</body>
</html>
Just say hi!
  vrijdag 7 november 2008 @ 10:35:10 #10
26400 wijsneus
Radicaal Democraat
pi_63024469
Jeuj!

maar wel een vieze, vieze hack hoor...
“There’s class warfare, all right, but it’s my class, the rich class, that’s making war, and we’re winning.”
― Warren Buffett
pi_63028559
Haha beter vies dan geen toch? tis sowiezo al jammer dat ik gebruik moet maken van een hack
Just say hi!
pi_63057221
Hoi, heb een css probleempje.

Ben voor scouting een nieuwe website aan het ontwerpen. We maken gebruik van Joomla en ben nu een bestaande template aan het wijzigen.

Ik vond alleen iets niet mooi wat met css te maken had maar krijg het niet opgelost.
Het gaat om het menu, is opgebouwd als een lijst. In FF werkt het prima maar IE doet gewoon erg moeilijk.
Ik heb echt voor alle lagen uit het menu gebruik gemaakt van een border-top, toch gebruikt IE kennelijk een border-bottom voor mijn hover.
http://test.scouting-olav.nl
Hier is het verschil te zien, hoop dat iemand weet of dit een vaker voorkomend probleem is en er ergens een hack bekend is.
Alvast bedankt.
I was trying to daydream, but my mind kept wandering...
pi_63057364
IE6 of IE7?
pi_63057811
IE7
I was trying to daydream, but my mind kept wandering...
  zaterdag 8 november 2008 @ 20:26:31 #15
26400 wijsneus
Radicaal Democraat
pi_63060483
Even algemeen: een lijstje van bekende IE bugs en hun oplossingen en hoe je in het algemeen te werk kunt gaan om IE in het gareel te krijgen.

Verder: de manier om te zorgen dat je CSS niet vol vieze hacks komt te staan.
“There’s class warfare, all right, but it’s my class, the rich class, that’s making war, and we’re winning.”
― Warren Buffett
pi_63062207
Ik zie mijn probleem er niet echt tussen staan. Kom wel dingen over block and list tegen, maar kan niet ontdekken hoe ik mijn probleem moet oplossen.
Staat ergens dat ik layout moet toewijzen aan mijn block, maar hoe ik dat zou moeten doen: geen idee!
I was trying to daydream, but my mind kept wandering...
pi_63073170
Nog even de code zodat iemand misschien nog een oplossing weet.
Dit is hoe mijn menu is opgebouwd, stonden automatisch nog meerdere div's omheen maar die heb ik weggehaald om het wat overzichtelijker te maken. Denk niet dat dat voor de oplossing uitmaakt omdat aan die div's geen class was toegewezen. Zoals ik eerder al zei is er een probleem met IE7 in het submenu, waar hij de border-top als border-bottom weergeeft. Althans, dat is wat ik denk dat er gebeurd. http://test.scouting-olav.nl

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
<div class="module_menu">
   <h3>Hoofdmenu</h3>
   <ul class="menu">
      <li class="item1">
         <a href="http://gooimeer.no-ip.info/olavtestsite/">   <span>Home</span></a>
      </li>
      <li class="parent active item3">
         <a href="/olavtestsite/index.php?Itemid=3"><span>Speltakken</span></a>
         <ul>
            <li class="item4">
               <a href="/olavtestsite/index.php?Itemid=4"><span>Bevers</span></a>
            </li>
            <li class="item5">
               <a href="/olavtestsite/index.php?Itemid=5"><span>Dolfijnen</span></a>
            </li>
            <li id="current" class="active item8">
               <a href="/olavtestsite/index.php?Itemid=8"><span>Zeeverkenners Ochtend</span></a>
            </li>
            <li class="item9">
               <a href="/olavtestsite/index.php?Itemid=9"><span>Zeeverkenners Middag</span></a>
            </li>
            <li class="item10">
               <a href="/olavtestsite/index.php?Itemid=10"><span>Wilde Vaart</span></a>
            </li>
            <li class="item11">
               <a href="/olavtestsite/index.php?Itemid=11"><span>Loodsenstam</span></a>
            </li>
            <li class="item14">
               <a href="/olavtestsite/index.php?Itemid=14"><span>Vaarschool Seal</span></a>
            </li>
            <li class="item12">
               <a href="/olavtestsite/index.php?Itemid=12"><span>Bestuur</span></a>
            </li>
            <li class="item13">
               <a href="/olavtestsite/index.php?Itemid=13"><span>Olav klusteam</span></a>
            </li>
         </ul>
      </li>
      <li class="parent item6">
         <a href="/olavtestsite/index.php?Itemid=6"><span>Onderkomens</span></a>
      </li>
      <li class="parent item7">
         <a href="/olavtestsite/index.php?Itemid=7"><span>Verhuur</span></a>
      </li>
      <li class="parent item20">
         <a href="/olavtestsite/index.php?Itemid=20"><span>Vrienden</span></a>
      </li>
      <li class="item2">
         <a href="http://gooimeer.no-ip.info/olavtestsite/administrator/index.html"><span>Site beheren</span></a>
      </li>
   </ul>
</div>


En dit is de bijbehorende css:
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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
* {
   padding: 0;
   margin: 0;
}

body {
   text-align: center;
   font-size: 76%;
   font-family: Arial, sans-serif, Verdana, Helvetica;
   line-height: 1.3;
}

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
   margin: 0.5em 0;
}

a img {
   border: 0px;
}

li, dd {
   margin-left: 1em;
}
li {
   list-style-type:circle;
}

fieldset {
   padding:5em;
}


td {
   padding:1px;
}

#wrap {
   min-width: 960px;
   max-width: 960px;
   width: auto !important;
   width: 960px;
   margin: 0 auto;
   text-align: left;
}

#header {
   background:#fff url(../images/hbg.jpg) 0 0 no-repeat;
   position:relative;
   height:180px;
   margin-top:10px;
   margin-bottom:5px;
   color:#fff;
}
#header .logo {
   margin-top:55px;
}
#header h1 {
   font-variant: small-caps;
   font-stretch: expanded;
   padding-left: 20px;
   color:#fff;
   font-weight: bold;
   font-size: 50px;
}
#header input {
   background: url(../images/search.png) no-repeat;
   border:0;
   height: 22px;
   width: 168px;
   padding: 2px;
   font-size:1em;
   color:#fff;
   border:1px solid #fff;
}
#header .search {
   position:absolute;
   top: 30px;
   right:20px;
   color:#fff;
}

#header .banner {
   position:absolute;
   top: 68px;
   right:20px;
   color:#fff;
}

#leftcol {
   float:left;
   width:23%;
   overflow:hidden;
}
#content {
   float:left;
   width: 54%;
}

#content1 {
   position:relative;
   float:left;
   width: 54%;
   overflow:hidden;
}

#content2 {
   position:relative;
   float:left;
   width: 77%;
   overflow:hidden;
}
#content3 {
   position:relative;
   float:left;
   width: 100%;
   overflow:hidden;
}


#rightcol {
   position:relative;
   float:left;
   width:23%;
   overflow:hidden;

}
#footer {
   clear:both;
   background:#fff url(../images/fbg.png) 0 bottom no-repeat;
   height:60px;
   margin-bottom:10px;
   padding-top:20px;
   text-align:center;
}
#top {
   padding:10px 10px 5px 10px;
   margin:0px;
}
#top .box {
   padding:0;
   margin:0;
   color:#000;
   background:#fff;
}

#bottom {
   clear:both;
   padding:10px 10px;
   margin:5px 10px;
   background:#fff;
   border-top:1px dotted #708059;
   border-bottom:1px dotted #708059;
}

#user {
   clear:both;
   padding:10px;
}

.box {
   padding:10px;
}

/* --- */

#leftcolbg {
   background: url(../images/lbg.png) 23% 0 repeat-y;
}

#rightcolbg {
   background: url(../images/rbg.png) 77% 0 repeat-y;
}


a {color: #99bf60;}
a:link {color: #708059;}
a:hover {color: #708059;}


h1, .contentheading, .componentheading, .contentpagetitle {
   color: #708059;
   font-weight:bold;
   font-size:1.5em;
}
h2{font-size: 1.5em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

hr {
   border:1px solid #DCE6CF;
}
fieldset {
   padding: 0.3em;
   border: 0px;
}

#footer, .small, .createdate, .modifydate {
   font-size:0.8em;
   color: #B4CC8F;
}
.module {
   margin-bottom: 1em;
   padding: 0 10px;
   padding-bottom: 5px;
   border: 1px solid #DCE6CF;
   text-align:left;
}

.module h3 {
   background: #DCE6CF;
   color: #708059;
   padding: 0.25em 0.5em;
   text-align: center;
   font-size: 1.1em;
   margin: 2px -8px 0.5em -8px;
   text-align: left;
}

.module_menu {
   padding:0;
   margin-bottom: 1em;
   color: #ffff99;
}

.module_menu h3 {
   background: #000000;
   color: #ffff99;
   padding: 0.25em 0.5em;
   text-align: left;
   font-size: 1.1em;
   margin: 0;
}

.module_menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.module_menu li {
   margin: 0;
   list-style:none;
}

.module_menu li a {
   display: block;
   padding: 3px 5px 3px 0.5em;
   border-left: 10px solid #000000;
   background-color: #ffff99;
   color: #000000;
   text-decoration:none;
   border-top: 1px solid #3366ff;
}

html>body .module_menu li a {
   width: auto;
}
.module_menu li a:hover, a#active_menu:link, a#active_menu:visited {
   display: block;
   border-left: 10px solid #000;
   background-color: #ffff33;
   color:#000000;
   border-top: 1px solid #3366ff;
}

.module_menu #current a {
   display: block;
   border-left: 10px solid #000;
   background-color: #ffff33;
   color:#000000;
   border-top: 1px solid #3366ff;
}

/*sub*/
.module_menu ul li ul li a{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   background-color: #ffff99;
   color: #000000;
   text-decoration:none;
   border-top: 1px solid #3366ff;
}

/*zelf toegevoegd, hover submenu 20 px*/
.module_menu ul li ul li a:hover {
   display: block;
   border-left: 20px solid #000;
   background-color: #ffff33;
   color:#000000;
   border-top: 1px solid #3366ff;
}

/*als menu is geklikt waar submenu inzit, maar submenu nog niet gebruikt*/
.module_menu ul #current ul li a{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   border-top: 1px solid #3366ff;
   background-color: #ffff99;
   margin:0 0 -1px 0;
   color:#000;
}

/*zelf toegevoegd, submenu ook van kleur veranderen*/
.module_menu ul #current ul li a:hover{
   display: block;
   border-left: 20px solid #000;
   background-color: #ffff33;
   border-top: 1px solid #3366ff;
   color:#000;
}

/*als menu is geklikt waar submenu inzit, en daarin een pagina bezocht word*/
.module_menu ul li ul #current a{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   border-top: 1px solid #3366ff;
   background-color: #ffff33;
   margin:0 0 -1px 0;
   color:#000;
}

/*zelf toegevoegd, submenu ook van kleur veranderen*/
.module_menu ul li ul #current a:hover{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   border-top: 1px solid #3366ff;
   background-color: #ffff33;
   margin:0 0 -1px 0;
   color:#000;
}


#header .module {
   margin-bottom: 0em;
   padding: 0; border: 0px;
}


#mainlevel-nav {
   list-style:none;
   float:right;
   margin:0;
   padding:0;
   width:100%;
   list-style-type:none;
   position:absolute;
   bottom:0px;
   right:10px;
}

#mainlevel-nav li {
   list-style:none;
   float:right;
   margin:0;
   padding:0px;
}

#mainlevel-nav a:link,#mainlevel-nav a:visited {
   float:left;
   display:block;
   color:#000;
   text-decoration:none;
   margin:0 2px;
   padding:7px 8px 5px 8px;
   border-left: 1px solid #80896c;
   border-top: 1px solid #80896c;
   border-right: 1px solid #80896c;
   border-bottom: 1px solid #80896c;
   background:#DCE6CF;
}

#header #active_menu-nav, #mainlevel-nav #current a {
   float:left;
   display:block;
   color:#000;
   text-decoration:none;
   margin:0 2px;
   padding:7px 8px 5px 8px;
   border-left: 1px solid #80896c;
   border-top: 1px solid #80896c;
   border-right: 1px solid #80896c;
   border-bottom: 1px solid #fff;
   background:#fff;
}

#mainlevel-nav #current {
background:#fff;
}

#mainlevel-nav li a:hover {
background:#fff;
}

.pagination span, .pagination a, .pagination strong{
   margin:0 3px;
}
I was trying to daydream, but my mind kept wandering...
pi_63092294
Tering wat een lap CSS. Is dat werkelijk allemaal nodig?

overigens denk ik dat het hier fout gaat

1
2
3
4
5
6
7
8
9
.module_menu ul li ul #current a:hover{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   border-top: 1px solid #3366ff; <---------
   background-color: #ffff33;
   margin:0 0 -1px 0; <-----------
   color:#000;
}



die divs overlappen elkaar, dus de border van de onderste valt over de bovenste. Blijkbaar is IE niet erg consequent in welke border over welke heenvalt en verandert dit bij het hoveren.

nog wat tips:
- Het is niet nodig de volledige nodestructuur te gebruiken als selector. Zoals hierboven: "#current a" was genoeg geweest
- verdiep je eens in shorthand notaties
- probeer te voorkomen dat je (zoals hierboven ook) properties dubbel declareert. Anders zoek je je rot als je iets moet aanpassen.
pi_63353532
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
 #sidebar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 200px;
padding-left: 550px;
margin: 0px;
float:left;   
height: 0px;
}
#sidebar h1 {
display: block;
background-color:#FF9900;
font-size: 100%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:215px;
}

#sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
border: 1px;
}
#sidebar ul li {
margin: 0px;
padding: 0px;
}
#sidebar ul li a {
font-size: 100%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
background-color: yellow;
color: #666666;
width:200px;


Waarom springt het menu in internet explorer in en in firefox niet :( ?



:)
pi_63354534
Beetje vaag. Heb je een linkje?

-edit-
mcD hier
pi_63371844


De tekst wil ik in IE gewoon netjes helemaal naar links hebben staan.
pi_63373191
Wat een heerlijke browser toch, dat IE .

Gebruik je wel een doctype tag?
pi_63377138
Jup

1
2
3
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
pi_63377409
Heb je niet gewoon een linkje ofzo? Of op zijn minst een stukje code? dat werkt toch vaak een stuk makkelijker...
pi_63377661
Website:
http://www.hokje10.nl/

+ bovenstaande CSS.
abonnement Unibet Coolblue
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')