Ik probeer enkele tabjes met links aan de bovenkant van mijn pagina te krijgen. Die tabjes moeten een variabele lengte krijgen, aangepast aan hun inhoud (de link dus). Ik heb drie plaatjes gemaakt met de linkerkant van de tab, het middenstukje en de rechterkant, om het af te sluiten. Daartussen plaats ik de links. Dat wil ik met layers positioneren. Dit is de CSS code die ik ervoor gebruikt:
En dit is de HTML
En hier is het resultaat te bekijken.
Nu zie je bij de tabjes in IE dat hij één pixel boven dat witte vlak met zwarte borders zweeft en in Mozilla Firebird overlapt hij met één pixel datzelfde vlak.
Ik wil dat niet; ik wil dat hij precies op dat witte vlak rust, op de border. Weet iemand hier wat ik fout doe?
Cascading Stylesheet:
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
| div * { box-sizing: border-box; -moz-box-sizing: border-box; } BODY { background-color: #DBDBE2; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #topmenutabs { background-color: #DBDBE2; width:750px; height: 14px; margin-right:auto; margin-left:auto; margin-top:17px; padding:0px; text-align: left; } .topmenutekst { background-color: #9999CC; height: auto; border-top: 1px solid #000; padding: 0px; position: relative bottom: 50px; } #content { background-color: #fff; width: 750px; height: 500px; border-left: 1px solid #000; border-right: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; margin-right:auto; margin-left:auto; text-align: left; } |
En dit is de HTML
HTML:
1
2
3
4
| <body> <div id="topmenutabs">[img]"pics/tableftend.gif"[/img]<span class="topmenutekst">DVD sectie</span>[img]"pics/tabmiddle.gif"[/img]Games sectie[img]"pics/tabmiddle.gif"[/img]Anime sectie[img]"pics/tabmiddle.gif"[/img]Alle secties[img]"pics/tabrightend.gif"[/img]</div> <div id="content">Hierin komt de verdere inhoud van de pagina te staan</div> </body> |
En hier is het resultaat te bekijken.
Nu zie je bij de tabjes in IE dat hij één pixel boven dat witte vlak met zwarte borders zweeft en in Mozilla Firebird overlapt hij met één pixel datzelfde vlak.
Ik wil dat niet; ik wil dat hij precies op dat witte vlak rust, op de border. Weet iemand hier wat ik fout doe?
We zijn allemaal vaandeldrager in een optocht van gekwetsten.