[XHTML1.0/CSS2] Verschil oplossen tussen Netscape en IE

[Verwijderd]

Zal even uitleggen waar het om gaat:
Ik ga een nieuw webdesign bedrijf starten volgende week, en daarvoor is wat portfolio nodig. Nu heb ik met mediadesign (maker cu2..etc) afgesproken comingout.nl te vernieuwen. Dat ben ik dus gaan doen, met de filosofie een website te maken gebaseerd op XHTML 1.0 Strict en CSS2, om de site zelf dus een beetje reclame te laten zijn voor het bedrijfje, doordat ie cross-browser is..

Alleen nu ben ik aangekomen in een zeer irritant stadium, waar Internet Explorer 6 en Opera 7.1 de site weergeven zoals ik heb bedoeld heb; en Netscape 7.1 en Safari 1.0 allebij dezelfde 'fout' maken.

Ik heb dus echt geen idee hoe ik ervoor kan zorgen dat die laatste twee de site ook weergeven zoals ik dat bedoeld heb.

Screenshot IE6: (goed)


Screenshot Netscape 7.1: (fout)

Cascading Stylesheet:

* {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px;
    color: black;
}
      
html,body {
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    text-align:center;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px;
}

body            { background-color: #8293C8; }

img             { border: 0px none; } 
B           { color: #8293C8; }           
.links          { float:left; margin-right:15px; }
.rechts         { float:right; margin-left:15px; }

a           { color: #8293C8; text-decoration: none; }
a:visited       { color: #8293C8; text-decoration: none; }
a:active        { color: #8293C8; text-decoration: none; }
a:hover         { color: #8293C8; text-decoration: underline; }

#frame          { position:relative;
              width:740px;
              min-height:100%;
              margin:0 auto 0 auto;
}

#boven          { width: 740px;
              height: 82px; 
                  background-color: #E9ECF5;
                  margin: 10px 0px 0px 0px;
}

div.toplogo     { background-color: #E9ECF5;
              float:left;
              width: 259px;  
              margin: 0px;
              padding: 0px;
                  border: 0px none;
              text-align:left;
              font-size: 10px;
}

div.topbanner       { 
              background-color: #E9ECF5;
              float: right; 
              width: 468px;  
              margin: 0px;
              padding: 0px 10px 0px 0px;
                  border: 0px none;
              font-size: 10px;
              text-align:center;
}

div.beneden     { width: 740px;
                  background-color: #FFFFFF;
}

div.menuframe       { background-color: #FFFFFF;
              float:left; 
              width: 120px;  
              margin: 0px;
              padding: 10px;
              border: 0px none;
              font-size: 10px;
              text-align:center;
              min-height:400px;
}

div.menu        { background-color: #E9ECF5;
              width: 120px;  
              margin: 0px;
              padding: 0px;
                  border: 0px none;
              text-align:center;
}

div.menutop     { background: url("images/menutop.jpg");
              height: 11px;
              font-size: 8px;
}

div.menubottom      { background: url("images/menubot.jpg"); 
              height: 11px;
              font-size: 8px;
}

div.menuactiveitem  { background: url("images/menuactive.jpg"); }

div.menu a      { text-decoration: none; color: black; }
div.menu a:visited  { text-decoration: none; color: black; }
div.menu a:active   { text-decoration: none; color: black; }
div.menu a:hover    { text-decoration: underline; color: #8293C8; }


div.content     { background-color: #FFFFFF;
              float:right; 
              width: 590px;  
              margin: 0px;
              padding: 10px 10px 10px 0px;
              border: 0px none;
              text-align:justify;
}

div.copyright       { width: 100%;
              background-color: #FFFFFF; 
              text-align: center;
              margin: 0px 0px 10px 0px;
              padding: 0px;
}

De site staat op http://dev.comingout.nl

Ik hoop dat jullie me kunnen helpen! En bedankt voor je tijd in ieder geval!

[Verwijderd]

Geef div.copyright een de property clear: right; mee? Het ligt waarschijnlijk aan de float: right; van de content div.

[Verwijderd]

Thanks! Had al wat met clear geprobeerd maar die optie dus niet Dit is al hele verbetering
Alleen nu laatste probleem:


Het menu zou net als IE/Opera (zie screen hierboven) gewoon naar de bodem moeten doorlopen, maar hier stopt ie? Dat ie zover naar beneden komt is het gevolg van min-height: optie.. maar hoe kan ik hem ook in Netscape en Safari naar beneden krijgen?

bvd!

[crisp]

Bedenk dat IE en waarschijnlijk Opera ook de container van je floats uitrekt, maar dat Netscape/Mozilla dat niet doet. min-height werkt daarentegen niet in IE.
Het is op dit moment gewoon lastig om opmaak in div's browser-compliant te krijgen omdat a) IE een aantal CSS2 zaken nog niet ondersteund, en b) Mozilla/Netscape anders met floats omgaat als IE/Opera en c) je nog verschillen hebt mbt boxmodels.

edit: je zal waarschijnlijk nog een overall container eromheen moeten zetten met een witte achtergrond

[ Voor 13% gewijzigd door crisp op 05-07-2003 23:19 ]

[Verwijderd]

Thanks

Dat ik niet op het idee kwam.. zo'n frame was er zelfs al, maar zonder background color..

Het is aardig gelukt Jammer dat inderdaad soms de schuld ECHT ligt bij de browsers.. maar ik heb er alles aan gedaan Morgen nog even in Safari controleren en dan vind ik het weer goed

[crisp]

ik vind het een verademing eens een design te zien in xhtml + css2.
nb, je hoeft niet altijd de browsers de schuld te geven, ook w3c is daar soms zelf debit aan door het opstellen van onlogische constructies (box-model) en ambiguiteit qua interpretatie van de standaards.

[Clay]

En weer een css probleem waar de float de bron van de ellende is. Als ik zo vrij mag zijn een paar tips te geven;

• gebruik geen floats om design elementen op hun plek te zetten. Een content boxje of plaatje oid binnen andere content zodat deze daaromheel loopt is het leuk en handig voor. Om je menu naast je content te zetten niet. De float heeft vaak een clear ergens nodig om dingen goed eruit te laten zien, en je krijg al snel ruzie tussen verschillende browsers omdat de resultaten gewoon onvoorspelbaar zijn. Je menu en je content staan bovendien ook niet vast. Als de content iets te breed wordt springt die onder je menu om in de container van 740px te passen, en dat wil je nooit, maar het zal wel gaan gebeuren (omdat het kan, murphy).
je kan het menu beter absolute positioneren, en de content gewoon met een margin van de breedte van dat menu ernaast zetten. Zo komt het ook naast elkaar, maar niet zoals met de float kan je er zeker van zijn dat het overal op werkt, stabiel is en te vertrouwen is. En met deze techniek kan je (veilig) ook meer dan 2 kolommen opbouwen, die technisch nooit onder elkaar kunnen springen door content breedtes.

• De min height kan je (op zich) wel gebruiken om de boel mee te laten rekken. Daarvoor kan je alleen beter wel even de bovenstaande kolom techniek gebruiken, en 1 gecentreerde container voor je page hebben (maar dat is er al) die de background heeft. Omdat je content div niet float of absolute gepositioneerd is rekt die de container mee, min-height zorgt er dan op opera, macIE, safari en Moz1.4 voor dat alles klopt. Heigt:100%; zou de background daarmee na schermhoogte afkappen.
Als je content toch altijd langer is dan schermhoogte boeit de min-height niet zo, maar als het ook wel eens minder is kan je de min-height met een scriptje uitlezen (in winIE ja, vreemd dat de property wel te lezen is) uit de divElement.currentStyle.minHeight, en omdat currentStyle IE only is kan je dat binnen een ifje oppakken, en in de style.height proppen, aangezien winIE height toch gebruikt als min-height.

't is kut dat je er een scriptje voor maken moet, maar het zijn maar een paar regels, en dan kan je wel xhtml/css2'en zonder enige problemen. Ik pas al het bovenstaande zelf ook toe.

[Verwijderd]

*al reply van clay verwachtte*

ik zal dadelijk eens gaan prutsen positionering met absolute en relative vind ik nogal raar werken enzo (centreren is ook lekker makkelijk met div's....) dus ik hoop dat het goed komt;

thanks