[CSS] wazige marges in IE - Softwareontwikkeling

donderdag 31 augustus 2006 16:54

Acties:

Topicstarter

Hoi,

ik heb volgende gemaakt:

HTML:

<!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" xml:lang="nl" lang="nl">
<head>
    <title>Test</title>
    <style type="text/css">
        ul {
            list-style: none;   
            margin: 0px;
            padding: 0px;
            width: 200px;
        }
        
        ul li {
            height: 30px;
            margin: 0px;
            padding: 0px;
        }
        
        ul li span {
            display: none;
        }
        
        li#geel {   background: yellow; }
        li#groen {  background: green; }
        li#bruin {  background: brown; }
        li#rood {   background: red; }
        li#paars {  background: purple; }
    </style>
</head>

<body>
    <ul>
        <li id="geel"><span>Geel</span></li>
        <li id="groen"><span>Groen</span></li>
        <li id="bruin"><span>Bruin</span></li>
        <li id="rood"><span>Rood</span></li>
        <li id="paars"><span>Paars</span></li>
    </ul>
</body>
</html>

In Firefox en Opera werkt dit perfect en geeft het volgende resultaat:
Afbeeldingslocatie: http://robbertkrebbers.nl/troep/got/menugoed.png

Echter doet IE weer eens raar:
Afbeeldingslocatie: http://robbertkrebbers.nl/troep/got/menuie.png

die moet weer eens 4px marge boven elk item zetten.

Als ik

Cascading Stylesheet:

1
2
3

ul li span {
    display: none;
}

verwijder, dan zijn die marges plotseling weer weg. Maar dan staan de teksten weer in mijn items, welke enkel moeten worden weergeven in bv een textbased browser (waar men de kleurtjes dus niet kan zien).

Snap iemand waar dit vandaan komt, of weet iemand een mogelijk oplossing voor dit probleem.

donderdag 31 augustus 2006 16:58

Acties:

Tsjilp

RS[I]ds

helpt display:inline ook?

Raar... Is zo gek nog niet

donderdag 31 augustus 2006 17:34

Acties:

user109731

IE gaat anders met lege list-items om dan Firefox en Opera, daar lijkt het iig op. Niet de netste oplossing, maar probeer eens   tussen de </span> en </li>? Of visibility:hidden ipv display:none, dat heeft in dit geval hetzelfde effect, maar dan zonder die bug.

[ Voor 44% gewijzigd door user109731 op 31-08-2006 17:41 . Reden: escapen :P ]

donderdag 31 augustus 2006 17:42

Acties:

Zoefff

❤ 

Het heeft te maken met de whitespace tussen de listitems. Zet ze maar eens allemaal achter elkaar (zonder enters), dan heb je er geen last meer van.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

donderdag 31 augustus 2006 17:44

Acties:

user109731

Zoefff schreef op donderdag 31 augustus 2006 @ 17:42:
Het heeft te maken met de whitespace tussen de listitems. Zet ze maar eens allemaal achter elkaar (zonder enters), dan heb je er geen last meer van.

Nee, dan werkt het nog niet. Ik dacht eerst ook dat het dat was idd...

donderdag 31 augustus 2006 19:09

Acties:

robbert

Topicstarter

Grote prutser schreef op donderdag 31 augustus 2006 @ 17:34:
IE gaat anders met lege list-items om dan Firefox en Opera, daar lijkt het iig op. Niet de netste oplossing, maar probeer eens   tussen de </span> en </li>? Of visibility:hidden ipv display:none, dat heeft in dit geval hetzelfde effect, maar dan zonder die bug.

Beide oplossing werken

visibility:hidden vind ik dan de mooiste oplossing iig, dan blijft de html code temminste netjes.

Bedankt