Ik ben er al een tijd mee bezig, maar ik krijg het volgende renderverschil tussen Webkit (boven) en Gecko en Trident (onder) niet verklaard. Wat doe ik verkeerd?
Het verschil geillustreerd:
De code:
Om de invloed van eventuele omliggende elementen te beperken heb ik bovenstaande stukje ook op zichzelf getest in een los HTML-bestand, en daar treed hetzelfde probleem op.
Het lijkt wel of het element zelf zijn breedte mag bepalen, maar zichzelf toch te klein maakt. Er is immers alle ruimte om de div rechts nog naar links te verbreden. Ze meten wel hetzelfde: in Chrome's Firebug lite is het element 390 pixels breed, en in Firefox DOM-inspector ook.
Het uitzetten van de font-weight: bold; helpt overigens niet (voor de zekerheid ff een poging gedaan).
Vreemd is, dat als ik onderstaande code weghaal, dit in Webkit geen invloed heeft op de plaatsing van "over ons", maar, dan wordt het item "helpdesk" naar voren verplaatst, uitgelijnt met "over ons" een regel erboven. Dit terwijl er in Gecko en Trident dan helemaal geen verschil te zien is, heeft de div zich dan gewoon wat naar links uitgebreid.
Ik wil vooral graag weten waarom dit gebeurt en heb niet echt behoefte aan "een hele andere manier waarmee het er wel hetzelfde uitziet"
Het verschil geillustreerd:
De code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> [...] <div id="top"> <div id="logo"> <a href=""><strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span></a> </div> <div id="topmenu"> <ul> <li><a href=""><span>over</span> ons</a></li> <li><a href=""><span>onze</span> partners</a></li> <li><a href="">contact</a></li> <li><a href="">helpdesk</a></li> </ul> </div> <div style="clear: both;"></div> </div> |
Om de invloed van eventuele omliggende elementen te beperken heb ik bovenstaande stukje ook op zichzelf getest in een los HTML-bestand, en daar treed hetzelfde probleem op.
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
| #container, #top, #contentcontainer { padding: 12px; } #logo { float: left; margin: 0; font-size: 2em; letter-spacing: -2px; } #topmenu ul, #mainsubmenu ul { margin: 0; padding: 0; list-style-type: none; } #topmenu li, #mainsubmenu li { display: inline; } #topmenu li { margin-left: 20px; } #topmenu li:first-child { margin-left: 0; } #topmenu a { color: #005288; } #topmenu a:hover { color: #00aeef; } #topmenu a span { color: #005288; } |
Het lijkt wel of het element zelf zijn breedte mag bepalen, maar zichzelf toch te klein maakt. Er is immers alle ruimte om de div rechts nog naar links te verbreden. Ze meten wel hetzelfde: in Chrome's Firebug lite is het element 390 pixels breed, en in Firefox DOM-inspector ook.
Het uitzetten van de font-weight: bold; helpt overigens niet (voor de zekerheid ff een poging gedaan).
Vreemd is, dat als ik onderstaande code weghaal, dit in Webkit geen invloed heeft op de plaatsing van "over ons", maar, dan wordt het item "helpdesk" naar voren verplaatst, uitgelijnt met "over ons" een regel erboven. Dit terwijl er in Gecko en Trident dan helemaal geen verschil te zien is, heeft de div zich dan gewoon wat naar links uitgebreid.
Cascading Stylesheet:
1
2
3
| #topmenu li:first-child { margin-left: 0; } |
Ik wil vooral graag weten waarom dit gebeurt en heb niet echt behoefte aan "een hele andere manier waarmee het er wel hetzelfde uitziet"
Er is geen sprake van dubbele padding dus, bv.
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
/u/102105/crop56f481fe1f74f.png?f=community)