[//CSS] margin-top afwijking voor i.e.

[quote:9acd103f6e="HS-L"]ok die moet er ook nog bovenop... maar doet die dat dan ook in i.e. mac?

kan ik niet zorgen dat in mijn styles.css gewoon als iemand met een ie win langs komt gelijk naar een normale zonder * html css-code (ie.css) gaat?? dat lijkt me een stuk makkelijker…[/quote:9acd103f6e]

Niet zonder browser sniffing en javascript en dat soort ellende.

Kijk, je hebt drie keuzemogelijkheden:

  1. Laat IE gebruikers de rambam krijgen, dan maar een scheve layout. Dat is meestal niet wenselijk, dus ben je gedwongen om corrigerende maatregelen te nemen:
  2. Neem de maatregelen in de CSS. Geen gedoe met sniffers, forwards-compatible, prima controleerbaar voor verschillende browsers en alles op 1 plek. Je HTML blijft lekker schoon.
  3. Ga aparte pagina’s maken (of aparte CSS) voor verschillende versies: server-side (PHP, ASP) of client-side (javascript) sniffing is noodzakelijk, hoe dan ook. Als er een nieuwe versie van een browser komt ben je verplicht om onderhoud te plegen, nieuwe pagina’s te maken etc. Kortom, je bent terug bij af in het Netscape4/IE4 tijdperk.

Misschien dat je er nu tegenop ziet, maar als je een paar keer zo gewerkt heb kom je erachter dat optie 2) verreweg het makkelijkst en het snelst is. Zolang je de volgorde van @import in acht neemt kan je browser voor browser tackelen. En vaak kan je met enig nadenken het probleem vemijden: zie mijn bericht hierboven ergens over een andere div structuur.

[quote:d9f633121b="HS-L"]in mijn styles.css dit staat:[code:1:d9f633121b]@import "standaard.css"; @import "ie.css"; [/code:1:d9f633121b] en in mijn ie..css dit: [code:1:d9f633121b]* html body { background-color : pink; }[/code:1:d9f633121b]

hij laadt hem in ie win wel,… maar wordt even roze… en dat is het… daarna gaat hij weer over op normaal.[/quote:d9f633121b]

Het achtergrondplaatje uit standaard.css wordt er overheen geladen

voeg toe: background-image : none;

maar wat is dan het nut dat ik het in een aparte css doe? dan kan ik het toch net zo goed in 1 css zetten?

of is het handiger omdat ik de i.e. specefieke dingen dan in een aparte css heb staan?

[quote:9695c459ba="HS-L"]maar wat is dan het nut dat ik het in een aparte css doe? dan kan ik het toch net zo goed in 1 css zetten?

of is het handiger omdat ik de i.e. specefieke dingen dan in een aparte css heb staan?[/quote:9695c459ba]

precies!

Alle browser laden eerst de eerste @import (de ‘standaard.css’), vervolgens lezen ze al dan niet de volgende @import stylesheets waarin de correcties voor die browser staan. Je hoeft dus alleen maar corrigerende maatregelen te nemen bij afwijking. Als je iets in standaard.css verandert dan test je vervolgens in alle browsers of het goed werkt. Zo ja, dan kan je een correctie toepassen in de specifieke stylesheet. Echt vele malen overzichtelijker. De [b:9695c459ba]volgorde[/b:9695c459ba] is wel cruciaal:

[code:1:9695c459ba]
@import standaard.css
→ de meest correcte CSS voor Mozilla, Opera en Safari

@import ie6.css
→ corrigerende maatregelen voor IE6 middels de ‘* html’ syntax. Deze wijzigingen worden ook toegepast door IE5, zowel de Mac als de Win versie!

@import ie5mac.css
→ corrigerende maatregelen voor IE5/Mac nadat je IE6.css hebt geschreven. Door de filtering voor en na de @import statement leest alleen IE5/Mac die stylesheet. Andere browsers negeren deze.

@import ie5win.css
→ corrigerende maatregelen voor IE5/Win nadat je IE6.css hebt geschreven. Door de filtering voor en na de @import starement leest alleen IE5.5/Win of IE5.0/Win die stylesheet. Andere browsers negeren deze.[/code:1:9695c459ba]

Lees ook: http://tantek.com/CSS/Examples/