[html] Css error in Chrome (negatieve margin)

zaterdag 31 maart 2012 20:51

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

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?

zaterdag 31 maart 2012 20:56

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

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.

Anyone who gets in between me and my morning coffee should be insecure.

zaterdag 31 maart 2012 21:39

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Relevant betekent dus een uitgeklede testcase waarin je kan aantonen dat het wel / niet werkt in bepaalde browsers

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

zondag 1 april 2012 00:08

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Css

Ik vermoed een z-index issue, maar is lastig te zien zo.

zondag 1 april 2012 00:08

Acties:

0 Henk 'm!

C0rnelis

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:

<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>

[ Voor 32% gewijzigd door C0rnelis op 01-04-2012 00:14 . Reden: html bijgevoegd + 't ligt toch niet alleen aan chrome, firefox doet hetzelfde ;) ]

Onderwerpen