[CSS] positioneringsprobleempjes (scrabble :9) in IE

[flashin]

Hallo,

Ik heb een layout gemaakt en in html gezet (xhtml 1.1 valid), en alles te positioneren met div's en css(2).

http://home.wanadoo.nl/tgroesen/csstest/

Als je in IE kijkt zie je al gauw wat ik bedoel, alles staat niet naast elkaar maar onder elkaar. Eerst had ik dit in firebird, eindelijk opgelost, maar nu ziet het er weer bagger uit in IE . CSS (staat gewoon in het document):

code:

<style type="text/css">
* {
    box-sizing: padding-box; 
    -moz-box-sizing: padding-box;
}

body {
    margin: 0px;
    background-color: #000000;
}
h3 { 
    margin: 0px;
    padding: 0px;
    font: 10px 'arial';
    letter-spacing: 0.2em;
    color: #FFFFFF;
}
#header, #wistJeDat, #menuKopje, #randomImg, .inleiding, .kopje, .tekst {
    float: left;
    font: 11px/17px 'arial';
    letter-spacing: 0.2em;
    padding: 5px;
    text-align: justify;
}
#mainContainer { 
    background-color: #F7F7F7;
    width: 700px;
    height: 700px;
}
    #header {
        height: 34px;
        background: url('img/bar.jpg');
        width: 496px;
        font-size: 12px;
        color: #FFFFFF;
        padding: 8px;
    }
    #header2 {
        height: 34px;
        background: url('img/bar.jpg');
        width: 200px;
        font-size: 12px;
        float: left;
        margin: 0px 0px 0px 2px;
    }
    #randomContainer { }
        #randomImg { 
            margin: 2px 0px 0px 0px;
            width: 496px;
            background: url('img/header.jpg') #1A1A1A;
            height: 142px;
            padding: 0px;
        }
        #wistJeDat { 
            width: 200px;
            background: #1A1A1A;
            color: #9C9C9C;
            font: 10px/16px 'Arial';
            margin: 2px 0px 2px 2px;
            height: 142px;
        }
    #mainContainer2 { }
        #contentContainer { }
            .inleiding { 
                background-color: #BCFFBC;
                float: left;            
                width: 496px;
                margin-right: 2px;
            }
            .kopje { 
                background-color: #0089D2;
                color: #FFFFFF;
                margin-top: 2px;
                width: 496px;
            }
            .tekst { 
                width: 492px;
            }
        #menuContainer { 
            float: left;
            width: 200px;
        }
            #menuKopje {
                background-color: #C6C6C6;
                width: 200px;
                margin-right: 1px;
            }
</style>

Wie kan mij helpen ?

Bvd

Flashin

edit:
Hier nog ff screen van FB:

[ Voor 20% gewijzigd door flashin op 29-10-2003 23:28 ]

[Verwijderd]

Valid HTML is nog niet altijd goede HTML. Dat van jou is totaal waardeloos als je de stylesheet weglaat, omdat je sommige HTML elementen gebruikt die te weinig over hun inhoud zeggen, en je gebruikt elementen die juist weer alleen iets over de style zeggen, en niets over hun inhoud.

Gebruik voor stukjes tekst <p> elementen, gebruik voor een afbeelding die met content te maken heeft <img>, gebruik voor kopjes <h1> t/m <h6>, drop die <b> en <i>.

[flashin]

Verwijderd schreef op 29 oktober 2003 @ 22:46:
Valid HTML is nog niet altijd goede HTML. Dat van jou is totaal waardeloos als je de stylesheet weglaat, omdat je sommige HTML elementen gebruikt die te weinig over hun inhoud zeggen, en je gebruikt elementen die juist weer alleen iets over de style zeggen, en niets over hun inhoud.

Gebruik voor stukjes tekst <p> elementen, gebruik voor een afbeelding die met content te maken heeft <img>, gebruik voor kopjes <h1> t/m <h6>, drop die <b> en <i>.

hmm ja, is nog wel onduidelijk maar ok, daar ging het nog ff niet om.. Het ging eigenlijk om wat IE er van bakte..

[ Voor 5% gewijzigd door flashin op 29-10-2003 22:50 ]

[Verwijderd]

Daar ging het jou even niet om nee, maar als je even je HTML opnieuw schrijft, dan scheelt dat weer gedoe natuurlijk. Waarom verder gaan met iets wat dus totaal niet de bedoeling is?

Deze layout is echt vreselijk eenvoudig te maken als je een paar elementen een breedte geeft, en een paar elementen rechts (of links) laat floaten.

[flashin]

Verwijderd schreef op 29 oktober 2003 @ 22:53:
Deze layout is echt vreselijk eenvoudig te maken als je een paar elementen een breedte geeft, en een paar elementen rechts (of links) laat floaten.

hm ja zal ff opnieuw proberen te doen

wat was ik nu aan het doen dan? je bedoelt teveel classes, teveel onzin wat er niet hoeft? die <b> en <i> bv

[ Voor 3% gewijzigd door flashin op 29-10-2003 22:58 ]

[flashin]

Ok, iets verbeterd (hoop ik) aan de hand van je tips. Ik heb alleen een probleempje met de <h2>, de kopjes die in de content staan (blauw). Ik krijg ze er niet goed tussen, niet als ik ze in de paragraaf zet of er buiten. In firebird tenminste, dit werkt in IE weer wel :S:S.. Maar ik ga denk ik er een nachtje over slapen

nog ff link: http://home.wanadoo.nl/tgroesen/csstest/

[ Voor 10% gewijzigd door flashin op 29-10-2003 23:21 ]

[BetuweKees]

probeer je menu als laatste te noemen met evt een hidden <hr> er voor; is het een stukje logischer als je bv in lynx kijkt..

[creative8500]

Een aantal opmerkingen:
• De div voor een h1-element is overbodig, h1 is toch al uniek
• Kijk eens naar de CSS-property 'clear'.
• Waarom geen absolute positionering?
• 'color: #FFFFFF' mag 'color: #FFF' zijn
• 'background-color: #0089D2' mag 'background: #0089D2' zijn
• 'arial' hoeft niet tussen aanhalingstekens
• bij content-paragrafen <div id="content"><p></p></div> i.p.v. <p class="text"></p>

[flashin]

Bedankt, dit word wel een stuk netter zo ja.. En clear: both werkt lekker, bedankt.

Als ik het menu onderaan zet, lijnt het niet netjes uit met de rest en het lukt ook niet echt met je hidden <hr> .

Absolute positionering is misschien wel handiger ja , ik gaat vanmiddag is kijken (nu naar school nml )..

[Clay]

Mijn €0.02 , als ik naar je layout kijk zie ik daar eigenlijk maar 2 kolommen in. De Moleculair gemeuk header hoort bij de 1e, nest die daar dan ook in en idem voor dat 2e ding, kan "wist je dat" dan ook niet gewoon in dat bovenste ding?

Verder positioneer je alles met floats. Dat kan wel, maar daarom komt de boel onder elkaar; de float garandeert namelijk niets, als het niet past in de breedte, dan klapt het naar beneden. Float zou ik alleen gebruiken voor minder belangrijke dingen; om b.v. plaatjes binnen content links of rechts uit te lijnen.
Ik zou de 1e kolom dan ook gewoon normaal positioneren (misschien relative als er wat absolute's inmoet, met een margin right ter breedte van die "wist je dat".
Die kan je dan met absolute naast de hoofdkolom neerzetten, met het menu daar gewoon in genest. De html daarvan zou zoiets kunnen worden:

HTML:

<div id="molecuulbouw">
   <div id="main">
      <h1>gemeuk</h1>
      ...
      <h2>content</h2>
   </div>

   <div id="menu">
      <h1>wist je dat</h1>
      ...
      <h2>menu</h2>
   </div>
</div>