[CSS] Telkens een 'trappetje'

[Avalaxy]

Ik heb een vaag probleem. In bijna alles wat ik schrijf met CSS krijg ik vage trappetjes in mijn code. Hier een screenshot om mijn probleem te illustreren:



Vorige keer heb ik het probleem opgelost door een display: inline tag te gebruiken, maar dit lijkt mij meer een work-around aangezien het ten eerste gewoon onder elkaar zou horen te staan, en ten tweede werkt de inline manier (bij mij) niet goed onder Internet Explorer.

De code deze keer:

HTML:

<div id='main'>
            <div id='row1'>
                <div id='graphs'>
                    
                </div>
                <div id='menu'>
                    <h3>Algemeen</h3>
                    <ul>
                        <li><a href='#'>Browsers</a></li>
                        <li><a href='#'>Besturingssystemen</a></li>
                        <li><a href='#'>Land van afkomst</a></li>
                    </u>
                    <br>
                    <h3>Gebruikers</h3>
                    <ul>
                        <li><a href='#'>Aantal bezoekers</a></li>
                        <li><a href='#'>Aantal geregistreerd</a></li>
                        <li><a href='#'>Hoogste omzet</a></li>
                        <li><a href='#'>Hoogste aantal bestellingen</a></li>
                        <li><a href='#'>Hoogste maximum uitgaven</a></li>
                    </u>
                    <br>
                    <h3>Producten</h3>
                    <ul>
                        <li><a href='#'>Best verkocht</a></li>
                        <li><a href='#'>Hoogste winst</a></li>
                        <li><a href='#'>Voorraad</a></li>
                    </u>
                </div>
            </div>
            <div id='row2'>
                <div id='bottom'>
                    <h3>Pageviews</h3>
                    <ul>
                        <li><a href='#'>Home</a></li>
                        <li><a href='#'>Producten</a></li>
                        <li><a href='#'>Aanbiedingen</a></li>
                        <li><a href='#'>Contact</a></li>
                        <li><a href='#'>Winkelmandje</a></li>
                    </u>
                </div>
            </div>
        </div>

Cascading Stylesheet:

body {
font-family: calibri, verdana;
}

h3 {
font-size: 110%;
margin-top: 0px;
color: #6E6E6E;
}

ul {
list-style-type: none;
margin: 0px;
}

li {
color: #6E6E6E;
margin: 0px;
padding: 0px;
}

a {
text-decoration: none;
color: #6E6E6E;
}

a:hover {
color: #A4A4A4;
}

#main {
width: 1024px;
margin: 0 auto;
}

#row1 {
width: 1024px;
float: left;
border: 1px dashed #C0C0C0;
padding: 5px;
}

#row2 {
width: 1024px;
float: left;
border-left: 1px dashed #C0C0C0;
border-right: 1px dashed #C0C0C0;
border-bottom: 1px dashed #C0C0C0;
padding: 5px;
}

#menu {
width: 300px;
float: left;
border-left: 1px dashed #C0C0C0;
padding: 5px;
}

#graphs {
width: 700px;
float: left;
padding: 5px;
}

#bottom {
width: 100px;
float: left;
padding: 5px;
}

Iemand enig idee hoe ik dat irritante trappetje wegkrijg?

[RaZ]

Uhm,

Je sluit je UL's niet af met </u> maar met </ul>

[Herko_ter_Horst]

Ja, je ul's fatsoenlijk afsluiten.

Met een goede HTML editor, of online valideren, kun je dit soort problemen voorkomen.

[ Voor 56% gewijzigd door Herko_ter_Horst op 01-04-2010 19:53 ]

[Avalaxy]

Oh god, wat voel ik me dom

Altijd van die lullige dingetjes

Herko_ter_Horst schreef op donderdag 01 april 2010 @ 19:52:
Ja, je ul's fatsoenlijk afsluiten.

Met een goede HTML editor, of online valideren, kun je dit soort problemen voorkomen.

Ik gebruik EditPlus, die heeft code-highlighting, maar hij herkent <u> als bestaande tag omdat dat volgens mij voor underline is/was.

[ Voor 73% gewijzigd door Avalaxy op 01-04-2010 19:55 ]

[RobIII]

Avalaxy schreef op donderdag 01 april 2010 @ 19:54:
Ik gebruik EditPlus, die heeft code-highlighting, maar hij herkent <u> als bestaande tag omdat dat volgens mij voor underline is/was.

Een beetje IDE markeert anders ook tags die niet matchen.

[RaZ]

* RaZ schrijft z'n code altijd op GoT, phat handy die code-highlighter hier, werkt superb