[css][html] vreemde positionering van de OL in ie7 - Softwareontwikkeling

maandag 21 mei 2007 21:46

Acties:

Verwijderd

Topicstarter

Hoi,

het volgende geval heb ik:

ik heb een ordered list met daarin list items die zelf weer twee spans hebben, eentje float links en de andere rechts.

zo zou het eruit moeten zien dus:

code:

1
2
3

1 links          rechts
2 links          rechts
3 links          rechts

met FF ziet dat er prima uit maar in ie7 worden de getallen door de tekst in het midden heengewoven

geef ik dan een width mee aan de omvattende div, dan begint elke li met 1 ipv door te tellen!

hier de code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 


div.modulelist ol {
    font-size:11px;
}

div.modulelist li { 
    
    clear:both;
    margin:0 0 0 0px;
    padding: 0 0 0 0px;
    width:140px;
    
}
    
div.modulelist li.complete, div.modulelist li.complete a {
    color:#474747;

}

div.modulelist  li.in_progress, div.modulelist  li.in_progress a {
    color:#458ebf;
    font-weight:bold;
    
}

div.modulelist  li.incomplete, div.modulelist  li.incomplete a{
    color:#7a7a7a;
}
span.left {
    float:left;
    }
    
span.right {
    float:right
}

span.clear {
    clear:both;

}

</style>
</head>


<body>

<div class="modulelist">
            <ol>
                <li class="complete"><span class="left">Module name</span><span class="right">Complete</span></li>
                <li class="complete"><span class="left">Module name</span><span class="right">Complete</span><span class="clear"></span></li>
                <li class="complete"><span class="left">Module name</span><span class="right">Complete</span></li>
                <li class="in_progress"><span class="left">Module name</span><span class="right">In Progress</span></li>
                <li class="incomplete"><span class="left">Module name</span><span class="right">--</span></li>
                
            </ol>
            </div>

</body>
</html>

dinsdag 22 mei 2007 13:23

Acties:

BikkelZ

CMD+Z

Dit lijkt me heel erg buggy IE behaviour.

Als je die width toekent aan de <OL> doet hij het zelfde als bij de <DIV>, als je hem aan de <LI> toekent dan doet hij het al iets beter: de cijfers nummeren door en de breedt is goed.

list-style-position: inside / outside werkt ook niet.

[ Voor 11% gewijzigd door BikkelZ op 22-05-2007 13:26 ]

iOS developer

dinsdag 22 mei 2007 13:30

Acties:

Zoefff

❤ 

Je spans zijn op dit moment geen blokelementen, dus ik zou ze sowieso nog "display: block;" meegeven. Je hebt kans dat het daarna wel goed werkt in IE7. Daarnaast zou ik het laatste item op een regel niet laten floaten, als het item ervoor al links float zou dat voldoende moeten zijn om het andere item er rechts naast te krijgen (eventueel met een margin oid.).

Maar voordat je allemaal ingewikkelde constructies met spans gaat knutselen, is dit niet gewoon tabulaire data?

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

dinsdag 22 mei 2007 13:37

Acties:

frickY

In IE6 telt hij ook niet op, zelfs niet nadat ik het tot het volgende heb geminimaliseerd;

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
<style type="text/css">   
ol li {      
    width: 200px; 
} 
</style>  
</head>  
<body>  
    <ol> 
        <li>1</li>  
        <li>2</li>  
        <li>3</li>  
        <li>4</li>  
        <li>5</li>                   
    </ol>  
</body>  
</html>

Erg suf probleem. Zodra je de width weghaalt werkt het prima.
En het volgende

HTML:

<html>  
<body>  
    <ol> 
        <li style="width: 200px">1</li>
        <li style="width: 200px">2</li>
        <li>3</li>
        <li style="width: 200px">4</li>
        <li>5</li>
    </ol>  
</body>  
</html>

Geeft

code:

Lijkt me een keiharde render-bug.

[ Voor 100% gewijzigd door frickY op 22-05-2007 14:38 ]

dinsdag 22 mei 2007 14:39

Acties:

BikkelZ

CMD+Z

Je bent zeker niet de eerste:

http://www.quirksmode.org...dered_list_correctly.html

Dit deden alle IE versies al fout blijkbaar.

iOS developer

dinsdag 22 mei 2007 15:55

Acties:

Verwijderd

Topicstarter

Sjonge jonge jonge....die IE...

Bedankt voor de tips allemaal, welicht dat ik er idd blocks van moest maken, ik heb het nu ook opgelost door 2 <p> classes die absoluut gepositioneerd zijn in een <li>

Ik vind het niet echt tabulaire data, het is meer een lijst waarbij elk item een actie heeft, maar ik snap wat je bedoeld.