De situatie:
Ik wil een div met afgeronde hoekjes van vaste breedte en variabele hoogte, met daarin 2 kolommen. Het is niet bekend welke van de 2 kolommen de hoogste is. Boven de linker kolom staat ook nog eens een kop:
Dat ziet er dan in FFen IE7 zo uit (kleuren aangepast ter verduidelijking)
http://www.meneer.net/test/boxtest.html
De bovenste rand is de achtergrond van de kop, de onderste van de container div.
hier is de code:
Het probleem is nu, dat in IE6 de kop (H2) onzichtbaar wordt. Dit lijkt me eerder op een bug, maar ik weet het niet zeker. Ik kan altijd terugvallen op het gebruik van een tabel voor de layout, maar ik heb het gevoel dat ik er zo bijna ben, alleen gooit die Ie6 weer roet in het eten...iemand een idee of tip voor een andere aanpak?
[edit]
Nou weet ik wel dat ik met een extra divje bovenin en een extra divje om de h2 en p heen waar dan de float left op zit ook een heel eind kom, maar ik zoek dus naar een CSS oplossing met bovenstaande html. ik vind het al lang jammer dat er onderaan een 'spacer-div' moet staan..(clear-after , waar blijf je
)
Ik wil een div met afgeronde hoekjes van vaste breedte en variabele hoogte, met daarin 2 kolommen. Het is niet bekend welke van de 2 kolommen de hoogste is. Boven de linker kolom staat ook nog eens een kop:
Dat ziet er dan in FFen IE7 zo uit (kleuren aangepast ter verduidelijking)
http://www.meneer.net/test/boxtest.html
De bovenste rand is de achtergrond van de kop, de onderste van de container div.
hier is de code:
HTML:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>asd</title> <style type="text/css"> .box { width:730px; padding:10px; position:relative; background:#FF9 url(boxbot.gif) no-repeat bottom; } div.box h2 { position:absolute; top:0px; left:0px; width:750px; padding-top:15px; background: url(boxtop.gif) no-repeat top; margin:0px; z-index:2; } div.box h2 span { padding-left:10px; } div.box p { padding-top:50px; width:50%; float:left; margin:0px; z-index:1; } div.box table { padding-top:0px; width:50%; float:left; z-index:1; } </style> </head> <body> <div class="box SectorE"> <h2><span>Lorem Ipsum Dolor sit amet</span></h2> <p> <a href="#">Lorem</a>, <a href="#">Ipsum</a>, <a href="#">Dolor</a>, <a href="#">Sit</a>, <a href="#">Amet</a>,<a href="#">Lorem</a>, <a href="#">Ipsum</a>, <a href="#">Dolor</a>, <a href="#">Sit</a>, <a href="#">Amet</a>,<a href="#">Lorem</a>, <a href="#">Ipsum</a>, <a href="#">Dolor</a>, <a href="#">Sit</a>, <a href="#">Amet</a> </p> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>lorem</th> <th>ipsum</th> <th>dolor</th> <th>sit</th> </tr> <tr> <td>1</td> <td>2</td> <td><a href="#"> amet</a></td> <td>consectueur</td> </tr> <tr> <td>3</td> <td>4</td> <td><a href="#">adipiscing</a></td> <td>elit</td> </tr> </table> <div style="clear:both"></div> </div> </body> </html> |
Het probleem is nu, dat in IE6 de kop (H2) onzichtbaar wordt. Dit lijkt me eerder op een bug, maar ik weet het niet zeker. Ik kan altijd terugvallen op het gebruik van een tabel voor de layout, maar ik heb het gevoel dat ik er zo bijna ben, alleen gooit die Ie6 weer roet in het eten...iemand een idee of tip voor een andere aanpak?
[edit]
Nou weet ik wel dat ik met een extra divje bovenin en een extra divje om de h2 en p heen waar dan de float left op zit ook een heel eind kom, maar ik zoek dus naar een CSS oplossing met bovenstaande html. ik vind het al lang jammer dat er onderaan een 'spacer-div' moet staan..(clear-after , waar blijf je
)
[ Voor 5% gewijzigd door Genoil op 04-04-2007 17:09 ]
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
. Ik stop de H2 in een links-floatende div samen met de p en die geef ik de linkerhelft van de bovenkant afbeelding, en de table rechts met de rechterhelft van de afbeelding. Kom ik netto op evenveel elementen uit :strip_icc():strip_exif()/u/2332/lektroluv.jpg?f=community)