[CSS] IE neemt float niet.

[Koeniepoenie]

Hallo allemaal,

Ik was laatst weer eens bezig met een klein nieuw design. Ik was net bezig met 't 'header'-gedeelte.
Toen er meteen al iets mis ging. In Firefox gaat alles naar wens, maar IE wil nog niet geheel meewerken.

Het probleem is hier te zien.

IE-gebruikers zullen het wellicht meteen zien, het menu staat boven het plaatje, terwijl die rechts naast het plaatje behoort te staan.
het menu 'valt' niet naar rechts, terwijl er toch echt een float:right staat in de CSS.

Ik heb al wat dingetjes geprobeerd, zoals het invoegen van een of meerdere enters e.d.
Maar het wil nog niet lukken,
heeft iemand enig idee waar het aan ligt hier?

BVD

[Verwijderd]

Je gebruikt sowieso nogal veel divs, terwijl die eigenlijk niet nodig zijn. Het kan bijvoorbeeld ook zo:

HTML:

<div id="main">
    <div id="menu">
        <h1>KoenPasman.nl</h1>

        <ul>
            <li>Home</li>
            <li>Weblog</li>
            <li>Over Mij</li>
            <li>Portfolio</li>
            <li>In Aanbouw</li>
            <li>Scripts / Snippers</li>
            <li>Gastenboek</li>
            <li>Contact</li>
            <li>Sitemap</li>
        </ul>
    </div>

    [img]""[/img]
</div>

Die je vervolgens opmaakt met:

Cascading Stylesheet:

#main {
    margin: 0 auto;
    width: 750px;
    min-height: 400px;
    background-color: #CBD0C4;
    border: #AEB7A2 1px solid;
}

h1 {
    text-align: center;
    width: 345px;
    font-size: 20px;
    color: #58697E;
    border-bottom: #A4B0BF 1px dotted;
}

#menu {
    float: right;
}

#headerImg {
    float: left;
    border-style: solid;
    border-color: #AEB7A2;
    border-width: 0px 5px 5px 0px;
}

#main ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#main ul li {
    font-size: 12px;
    background-color: #C7CCBF;
    border-top: #A4AB96 1px dotted;
    text-align: center;
    color: #29546D;
}

#main ul li:hover {
    background-color: #AEB7A2;
    border-top: #A4AB96 1px solid;
}

Dit werkt ook zoals het hoort in IE, maar let wel op dat die min-height niet goed ondersteund. En nog wat dingen:

• Je gebruikt nu een .htc voor het hover effect, terwijl dat ook eenvoudig met een :hover op de links in je <ul> kunnen. Scheelt weer een .htc
• Als je tóch al een JS bestand include kun je daar beter de onload inzetten, dus window.onload = randPic;. Dat is natuurlijk persoonlijk, maar je hoeft dan geen JS meer in je (X)HTML zitten.

edit:

Bovenstaande CSS zal niet goed werken in IE 5.x vanwege het boxmodel, maar dat is natuurlijk nog vrij eenvoudig op te lossen.

[ Voor 23% gewijzigd door Verwijderd op 18-04-2004 19:18 ]

[Koeniepoenie]

Ah zeer nice.

Ik had het zelf ook even geprobeerd door de img-tag buiten het menu e.d. te halen, maar toen werkte het ook niet.
Zal idd wel aan de hoeveelheid divs hebben gelegen.

Dat van die HTC weet ik nog niet zeker of ik dat doe, want wellicht ga ik het ook nog op andere elementen toepassen.

En ik ga ook maar eens kijken naar IE 5.x...

Maar iig bedankt voor 't helpen, wederom weer iets geleerd