Copyright 1998 - 2026 DPG Media B.V. Mon, 11 May 2026 04:27:56 GMT Mon, 11 May 2026 04:27:56 GMT GoT - list_messages https://gathering.tweakers.net/ Gathering of Tweakers https://tweakers.net/g/if/logo.gif nl-nl https://gathering.tweakers.net/rss/list_messages/1496992 [html] Css error in Chrome (negatieve margin) - Softwareontwikkeling - GoT gathering@tweakers.net (Administrator) C0rnelis https://gathering.tweakers.net/forum/list_message/37965939#37965939 Met de aanname dat het om een list-element gaat( ol / ul )/ Dit is eigenlijk een (voor mij) erg bekend probleem. In dit geval ligt het aan Chrome die uit zichzelf list-elementen een padding-left van 40px geeft Het verschil zit 'm in het feit dat Chrome en ook Firefox (4.0 RC1 heb ik zo bij de hand) uit zichzelf een padding-left meegeven van 40px (zie bij rechtermuisklik > element inspecteren onder kopje 'user agent stylesheet' > -webkit-padding-start: 40px;). Internet Explorer doet dit niet (niet in versie 8 in ieder geval). Dit zal je niet zien bij testcases op o.a. jsfiddle.net vanwege hun normalize.css die de padding van dit element naar 0 zet. Met onderstaande CSS moet het dan ook opgelost zijn. Is dat niet het geval dan is er waarschijnlijk meer/iets anders aan de hand. Cascading Stylesheet:1 ul, ol { padding: 0; } Testcase html: HTML:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html> <head> <style type="text/css"> body { padding-left: 50px; } ol, li { border: 1px solid red; } li { width: 100px; margin: 2px; } </style> </head> <body> <ol> <li>li #1</li> <li>li #2</li> <li>li #3</li> <li>li #4</li> </ol> </body> </html> Dit is eigenlijk een (voor mij) erg bekend probleem. In dit geval ligt het aan Chrome die uit zichzelf list-elementen een padding-left van 40px geeft Het verschil zit 'm in het feit dat Chrome en ook Firefox (4.0 RC1 heb ik zo bij de hand) uit zichzelf een padding-left meegeven van 40px (zie bij rechtermuisklik > element inspecteren onder kopje 'user agent stylesheet' > -webkit-padding-start: 40px;). Internet Explorer doet dit niet (niet in versie 8 in ieder geval). Dit zal je niet zien bij testcases op o.a. jsfiddle.net vanwege hun normalize.css die de padding van dit element naar 0 zet. Met onderstaande CSS moet het dan ook opgelost zijn. Is dat niet het geval dan is er waarschijnlijk meer/iets anders aan de hand.

Cascading Stylesheet:
1

ul, ol { padding: 0; }


Testcase html:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
    <style type="text/css">
        body { padding-left: 50px; }
        ol, li { border: 1px solid red; }
        li { width: 100px; margin: 2px; }
    </style>
</head>
<body>
    <ol>
        <li>li #1</li>
        <li>li #2</li>
        <li>li #3</li>
        <li>li #4</li>    
    </ol>
</body>
</html>
]]> C0rnelis https://gathering.tweakers.net/forum/list_message/37965939#37965939 Sat, 31 Mar 2012 22:08:17 GMT Bosmonster https://gathering.tweakers.net/forum/list_message/37965936#37965936 Ik vermoed een z-index issue, maar is lastig te zien zo. Bosmonster https://gathering.tweakers.net/forum/list_message/37965936#37965936 Sat, 31 Mar 2012 22:08:07 GMT BtM909 https://gathering.tweakers.net/forum/list_message/37965348#37965348 Relevant betekent dus een uitgeklede testcase waarin je kan aantonen dat het wel / niet werkt in bepaalde browsers uitgeklede testcase waarin je kan aantonen dat het wel / niet werkt in bepaalde browsers :)]]> BtM909 https://gathering.tweakers.net/forum/list_message/37965348#37965348 Sat, 31 Mar 2012 19:39:38 GMT MueR https://gathering.tweakers.net/forum/list_message/37965186#37965186 Mijn kristallen bol is al jaren stuk helaas. Misschien kan je onze quickstart even nalezen, met het Devschuur® Beleid. Ik zou graag een relevante aanvulling op je probleem lezen. quickstart even nalezen, met het Devschuur® Beleid. Ik zou graag een relevante aanvulling op je probleem lezen.]]> MueR https://gathering.tweakers.net/forum/list_message/37965186#37965186 Sat, 31 Mar 2012 18:56:02 GMT Verwijderd https://gathering.tweakers.net/forum/list_message/37965163#37965163 Hallo, Mijn pagina is opgebouwd uit een navigatiebar links en een main. De main heeft een negatieve margin zodat de navigatiebar er mooi naast komt. De positionering klopt, maar in de navigatiebar werken de links en de mousover acties niet.. Toch niet in Chrome, werkt wel perfect in IE. Heeft iemand een idee waar de fout kan liggen, of als dit een bekende bug is?
Mijn pagina is opgebouwd uit een navigatiebar links en een main.
De main heeft een negatieve margin zodat de navigatiebar er mooi naast komt.

De positionering klopt, maar in de navigatiebar werken de links en de mousover acties niet..
Toch niet in Chrome, werkt wel perfect in IE.

Heeft iemand een idee waar de fout kan liggen, of als dit een bekende bug is?]]> Verwijderd https://gathering.tweakers.net/forum/list_message/37965163#37965163 Sat, 31 Mar 2012 18:51:11 GMT