Meerdere stylesheets, afhankelijk van browser.

[Verwijderd]

Ik heb de volgende site ontworpen:

www.haptotherapiefriesland.nl

De site is opgebouwd met div's, die dmv css op hun plek worden gezet. 1 grote placeholder van 100% bij 100%, en dan nog 4 div's naast elkaar, die met verschillende margins ten opzichte van elkaar staan.

Nu echter het grote probleem. De div's staan op verschillende plekken in de verschillende browsers. Als ik de div met de menuopties op margin-left:0 zet. Staat ie keurig netjes helemaal links uitgelijnd. Zet ik hem echter op 20px, dan zet ie m in Safari en Firfox netjes 20px van de kant. In IE lijkt het wel of hij hem 40px verplaatst.

Ik heb nu alle div's even met opzet 'fout' gezet. Zodat het er in IE in elk geval goed uitziet.

Ik zie even geen andere oplossing dan 2 css-sheets maken (met dus verschillende positions). En afhankelijk van welke browser de gebruiker heeft, een css laten aanwijzen.

Hoe moet dit?

[crisp]

IE's double-margin bug bij floats. Zet een display:inline op je float en IE doet het weer goed

Als je echt aparte styles aan IE wilt voeren dan zou ik overigens conditional comments gebruiken

[ Voor 45% gewijzigd door crisp op 18-12-2005 13:40 ]

[Verwijderd]

Het eenvoudigst is in dit geval conditional comments, om stylesheets alleen door Internet Explorer te laten inladen.

Maar volgens mij is deze layout ook makkelijk zonder browser-specifieke trucs te realiseren.

[Geert.H]

Als ik dan een ander vraagje mag stellen aan de hand van dit probleem. Wat is beter, 2 stylesheets of zorgen dat er 1 werkt. Het is natuurlijk een stuk makkelijker om er twee te maken (vind ik, maar dat kan ook liggen aan mijn beperkte kennis) omdat je de kleine bugs er makkelijker uit kan halen. Maar is dit ook correct?

[André]

Beter is 1 stylesheet waarin alles werkt

Eventuele uitzonderingen kun je dan met conditional comments aanbrengen. Als je maar zorgt dat dat er gewoon niet veel zijn.

[crisp]

Ghoekzema schreef op zondag 18 december 2005 @ 13:49:
Als ik dan een ander vraagje mag stellen aan de hand van dit probleem. Wat is beter, 2 stylesheets of zorgen dat er 1 werkt. Het is natuurlijk een stuk makkelijker om er twee te maken (vind ik, maar dat kan ook liggen aan mijn beperkte kennis) omdat je de kleine bugs er makkelijker uit kan halen. Maar is dit ook correct?

Dat ligt eraan. Ik ga meestal uit van 1 basis stylesheet zonder hacks die uitgaat van standards-compliant browsers. Alles wat dan aangepast moet worden voor IE (bijvoorbeeld om boxmodel verschillen in IE < 6 op te lossen) stop ik in een additionele stylesheet die ik middels conditional comments inlaad.
In eerste instantie probeer ik wel zoveel mogelijk dergelijke verschillen te vermijden - bijvoorbeeld door geen padding/borders op te geven voor elementen met een width/height, of zoals in het geval van de topicstarter gewoon de display:inline toe te voegen - deze wordt door standards compliant browsers toch genegeerd als het element een floating element is.

[Verwijderd]

crisp schreef op zondag 18 december 2005 @ 13:39:
IE's double-margin bug bij floats. Zet een display:inline op je float en IE doet het weer goed

Als je echt aparte styles aan IE wilt voeren dan zou ik overigens conditional comments gebruiken

Inderdaad een hele goede tip! Bedankt.

Bij de floats links en rechts werkt dit inderdaad, maar nu zie ik dat het menu in Safari en FF nog niet op de goede plek staat qua hoogte.

[ZeilDude]

Misschien wat offtopic, maar mag ik vragen waarom ik de content van je site in een venstertje van 168x208 px moet lezen terwijl ik een monitor van 1280x768 px heb? Ik zie op mijn mobieltje nog meer!

Verder... ken je de tags <uL> en <li>? Zo ja, waarom gebruik je die niet? En er zitten diverse tags in die niet helemaal kloppen qua semantiek. Tot slot <br> moet <br /> zijn bij XHTML.

[shnazzle]

A) Ik heb dezelfde problemen, zal dat display:inline truukje ook proberen.

B)Ben het eens met Zeildude, niet te lezen dat kleine blokje. Ik draai op 1600x1200, met de text rendering van ubuntu breezy, maar dan nog is het niet te lezen.
Ik zou zeggen, trek het witte van de cirkel door naar rechts, maar het tekstvenstertje zo groot als die nu is + grote van plaatje ernaast, en zet het plaatje daar naast.


zoiets dus.. Dat moet dus je site voorstellen en hoe ik dat
'witte van cirkel naar rechts' bedoelde. Ik zou het dan op andere manier wat 'vorm' geven, maar zo is alles in ieder geval leesbaar

Trouwens, ik zit nu achter een 1152x864 scherm en daar is het ook niet te lezen...dus dat het niet alleen te maken heeft met 1600x1200 en 1280x768.... mensen.