[CSS] Margin probleem

[Saven]

Aloa,

Ik was bezig met een menutje enzo, alleen Internet Explorer 6 parsed hem niet zo goed



Zoals je ziet is er een misterieuze bottom-margin in IE6 die ik maar niet weg krijg

Mijn html:

HTML:

<div class="menu">
    <div class="menu_top">Actieve Topics</div>
    <ul>
        <li><a href="{$url}">Check dit topic</a></li>
        <li><a href="{$url}">Blalalala</a></li>
        <li>laladsfsdfla</li>
        <li><a href="{$url}">Once againt toch ja</a></li>
        <li><a href="{$url}">Bugje</a></li>
        <li><a href="{$url}">Spam er op los</a></li>
        <li><a href="{$url}">password</a></li>
        <li><a href="{$url}">[VB] Chat maken?</a></li>
        <li><a href="{$url}forum/actief">&rsaquo; Actieve topics</a></li>
        <li>lalala</li>
    </ul>
</div>

Mijn css:

Cascading Stylesheet:

.menu
{
    background-color: #e9ebe3;
    border: 1px solid #aeaea4;
    margin-bottom: 5px;
    width: 180px;
}

.menu_top
{
    background: #dbddd0 url(i/layout/menu_top.gif) repeat-x;
    color: #4381a8;
    font-weight: bold;
    font-size: 12px;
    padding: 4px;
}

.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.menu li
{
    background-color: #f1f2ed;
    border-top: 1px solid #ffffff;
    margin: 0px;
}

.menu li a
{
    padding: 2px;
}

.menu li a:link, .menu li a:visited
{
    color: #4381a8;
    display: block;
    text-decoration: none;
}

.menu li a:hover, .menu li a:active
{
    background-color: #fbfbf9;
    text-decoration: none;
    display: block;
    color: #79a7c5;
}

Weet iemand hoe ik dit op kan lossen?
Alvast bedankt

[Sappie]

Lijkt erop dat je te maken hebt met een hasLayout probleem. Serveer voor IE6 es de css (.menu li { display: inline-block; }. Wellicht lost dat je probleem op.

[Saven]

Sappie schreef op zaterdag 21 april 2007 @ 14:04:
Lijkt erop dat je te maken hebt met een hasLayout probleem. Serveer voor IE6 es de css (.menu li { display: inline-block; }. Wellicht lost dat je probleem op.

Bijna, niet helemaal


krijg ik nu in IE6

[Sappie]

Je gebruikt een andere 8ergrond en de margins zijn iets groter ofzo? Dan serveer je voor IE6 ook aangepaste margins. IE6 word je ellendig van. Verder gebruik je ook een lettertype wat niet uit de css blijkt.

edit:
Waarschijnlijk heeft het wat met de line-height te maken icm vertical-align.

[ Voor 37% gewijzigd door Sappie op 21-04-2007 14:39 ]

[Saven]

Sappie schreef op zaterdag 21 april 2007 @ 14:24:
Je gebruikt een andere 8ergrond en de margins zijn iets groter ofzo? Dan serveer je voor IE6 ook aangepaste margins. IE6 word je ellendig van. Verder gebruik je ook een lettertype wat niet uit de css blijkt.

edit:
Waarschijnlijk heeft het wat met de line-height te maken icm vertical-align.

Maar waar moet ik de margins aanpassen, want als ik overal margin:0px; neerzet heeft dat geen nut

[Sappie]

Je moet waarchijnlijk spelen met de line-height property, die geldt voor alle tekst ed. In IE wordt deze anders geïnterpreteerd dan in FF, vandaar dan ook dat het hoger is in IE dan in FF.

Nog even een tip: Let verder op dat padding-top en bottom en margin-top en bottom, als ook height en width , alleen van invloed zijn op een block level element en niet op een inline element.