Hallo,

Ik heb een serieus probleem met mijn divjes in IE. De pagina wordt perfect weergegeven zoals ik wil in FF en Opera, maar in IE slaat het op niets :S

LINK: Firefox && Internet Explorer

CODE:


<HTML>

<HEAD>
<TITLE>
    Thomas' blog
</TITLE>

<STYLE>
<!--

body
{
margin: 0px;
padding: 0px;
font-family: Helvetica, Arial;
font-size: 10pt;
color: #666666;
text-align: center;
min-width: 800px;
background-image: url(ContentBack.gif);
background-position: center center;
background-attachment: fixed;
background-repeat: repeat-y;
}

.Container
{
margin: 0 auto;
padding: 0;
width: 100%;
height: 191px;
background-image: url(HeaderBack.gif);
background-position: top center;
background-repeat: repeat-x;
}

.Header
{
margin: 0 auto;
padding: 0;
width: 766px;
height: 117px;
background-image: url(HeaderContent.gif);
top: 74px;
left: 0px;
position: relative;
}

.Page
{
margin: 0 auto 0 auto;
padding: 5px 5px 5px 5px;
width: 750px;
top: -25px;
position: relative;
}

.clTitle { color: #8EC657; }
.clSubTitle { color: #666666; }
.clError { color: #C85568; }

.LineHeight2 { line-height: 2pt }

#idH1
{
font-size: 11pt;
font-weight: bold;
line-height: normal;
}

#idH2
{
font-size: 10pt;
font-weight: normal;
line-height: normal;
}

#idH3
{
font-size: 8pt;
font-weight: normal;
line-height: normal;
}

.clBack
{
background-color: #F1F1F1;
}

#idMenu
{
margin: 0px 5px 0px 5px;
padding: 5px;
width: 200px;
text-align: left;
position: absolute;
}

#idContent
{
margin: 0px 5px 0px 220px;
padding: 5px;
width: 520px;
text-align: left;
}

#idSubTitle
{
padding: 2px 2px 2px 2px;
}

</STYLE>

</HEAD>

<BODY>

<DIV CLASS="Container">
    <DIV CLASS="Header">
    </DIV>
    <DIV CLASS="Page">
        <DIV ID="idMenu" CLASS="clBack">
            <FONT ID="idH1" CLASS="clSubTitle">Menuutje...</FONT>
            <ol>
                <li>Nummer 1</li>
                <li>Nummer 2</li>
                <li>Nummer 3</li>
                <li>Nummer 4</li>
                <li>Nummer 5</li>
            </ol>
            <HR>
        </DIV>
        <DIV ID="idContent">
            <FONT ID="idH1" CLASS="clTitle">Dit is een pagina met enorm veel tekst !</FONT><BR>
            <DIV ID="idSubTitle" CLASS="clBack"><FONT ID="idH3" CLASS="clSubTitle">Dit is een pagina met enorm veel tekst !</FONT><BR></DIV>
            <FONT CLASS="clError"><B>Dit is een pagina met enorm veel tekst !</B></FONT><BR>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc convallis. Aenean lacinia ornare erat. Ut nonummy porttitor elit. Praesent aliquam aliquam lectus. Maecenas eleifend. Duis sed justo et justo convallis lacinia. Morbi pede est, gravida a, laoreet sit amet, gravida at, nunc. Quisque at mi. In interdum nisl nec purus. Fusce ac mi eu elit pellentesque luctus. Nam sagittis luctus neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum placerat felis ut ante. Nulla mi ipsum, semper nec, mollis elementum, iaculis at, nulla. Suspendisse elit sem, sollicitudin nec, luctus at, lacinia non, lectus. Ut condimentum libero vel lectus. Mauris ante. Aliquam commodo lorem et sapien.

                Duis dictum. Nunc vitae magna ut felis dignissim commodo. Morbi rutrum odio et nibh. Morbi bibendum tincidunt libero. Nullam congue, ipsum id lobortis eleifend, lacus arcu fermentum libero, vel fringilla enim nisi non risus. Maecenas nunc. Pellentesque leo. In hac habitasse platea dictumst. Cras aliquet nibh a orci. Maecenas adipiscing, ipsum id ullamcorper semper, purus arcu cursus nisi, non vulputate nisl urna eu lacus. Morbi nisl dolor, nonummy vel, rutrum a, consectetuer ac, risus. Morbi purus. Etiam non nulla. Vivamus placerat nisi in nibh. Mauris convallis eleifend dolor. Duis cursus ante nec elit. In at elit. Vestibulum sed purus vitae mauris facilisis nonummy. Nullam orci. Vivamus id urna.

                Curabitur est leo, porta in, ultricies quis, fermentum nec, nibh. Phasellus sit amet enim et augue tincidunt tincidunt. Proin nisl tellus, tristique vitae, elementum vel, auctor a, ipsum. In pretium nonummy eros. Pellentesque dui risus, volutpat eget, porttitor vitae, tristique condimentum, velit. Donec bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla interdum. Aenean aliquet. Mauris pulvinar. Fusce imperdiet nunc a arcu. Vivamus viverra turpis a quam. Donec sit amet nisl.

                Vivamus quam nulla, varius quis, pharetra sit amet, sagittis quis, lacus. Phasellus sollicitudin ultrices pede. Integer quis sem eget nibh placerat pulvinar. Donec neque mi, dignissim sed, congue vitae, lobortis nec, leo. Vivamus ullamcorper. Vivamus vitae lectus. Ut at augue. Vivamus congue euismod quam. Donec lacus libero, fermentum in, eleifend imperdiet, consequat vitae, mi. Pellentesque ultrices iaculis velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et risus a diam pulvinar malesuada. Sed enim nisi, auctor nec, luctus a, auctor quis, tellus.

                Nullam id orci non tellus sagittis pharetra. Donec fermentum tincidunt lacus. Pellentesque quis arcu. Mauris orci. Pellentesque lorem. Phasellus sagittis. Aliquam pharetra. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras accumsan purus at mauris. Quisque a pede. Praesent mollis, eros a aliquet mattis, augue orci pulvinar neque, nec hendrerit nibh elit lacinia elit. Aliquam tincidunt tempor pede.
        </DIV>
    </DIV>
</DIV>
</BODY>

</HTML>


Edit: Link aangepast ;)
je kunt ook je CSS file schrijven voor beidde,

als je // voor een regel zet pakt ( of juist IE of juist FF ) de regel als commetaar, zo kun je voor de ene browser een regel laten uitvoeren en voor de andere niet.
@Ponzi, heb je die doctype nou al erin gezet??

edit: typo
@ Mark: Ja, maar het heeft geen effect, de divs blijven niet staan gelijk ze zouden moeten :( .

@ Twan: Dat weet ik allemaal en is geen probleem, maar ik krijg mijn 'layout' gewoon al niet tegoei (enkel voor IE). Ik vind de fout niet in de code ;)
Het probleem zit 'm in de browsers! Firefox intepreteert sommige css anders dan Internet Explorer. Daarbij moet ik zeggen dat het bij Internet Explorer het ergst is.

De oplossing?

-Maak simpele css.
-Kijk na elke verandering wát er veranderd zodat je precies weet waar de fout zit
-gebruik evt. hacks
Ok, zal ik doen (was trouwens al bezig ;) ) .

Ik zal iets laten weten als ik er achter ben gekomen :) . Suggesties zijn nog steeds welkom !
Oke ik wacht in spanning.... :P
Ja, sorry, maar nog steeds geen oplossing gevonden ;) . Zal er na de examens eens werk van maken :) Als ik nog eens héél véél tijd heb :P !
Waarde langenoten en bovenburen, eindelijk heb ik de oplossing gevonden :) !

Het was (relatief) simpel ;) . Hij zette het menu x aantal pixels teveel naar rechts dus heb ik (enkel voor IE) de margin op -x pixels gezet :) . Nu staat het waar het moet staan. Op dezelfde manier heb ik dus ook de body-content juist gepositioneerd !

Voor de geïnteresseerden:

<!--[if IE]>
<STYLE>
.clHeader
{
margin: 0 auto;
padding: 0;
width: 766px;
height: 117px;
background-image: url(style_themes/<? echo MEMBER_THEME ?>/images/HeaderContent.gif);
top: 74px;
left: 1px;
position: relative;
}

#idMenu
{
margin: 0px 5px 0px -212px;
padding: 5px 5px 5px 5px;
width: 200px;
text-align: left;
position: absolute;
}
</STYLE>
<![endif]-->


Bedankt allemaal !
Moraal van dit verhaal: Buiten met IE :D !
Misschien kun je het ook anders oplossen.

IE lijkt nogal wat problemen te hebben met het verschil tussen padding en margin, dus misschien kun je het ook zo nog oplossen.

Zal eens zien of ik het kan optimaliseren, maar het werkt nu alleszins fatsoenlijk ;)

Reageren