Opgelet! Dit is geen belediging


Dat we daar al over eens zijn, dit is geen belediging aan het adres van beginnelingen, eerder een samenvatting wat je als beginneling allemaal tegenkomt bij met het proberen je CSS gestuurde website in FireFox en Internet Explorer hetzelfde te krijgen.

De ergernis

De ergernis die beginnelingen tegenkomen staan te lezen op verschillende webdesign forums die België en Nederland rijk is, en handelen meestal om dezelfde problemen:

  • mijn site ziet er goed uit in IE, maar niet in FireFox
  • of omgekeerd

Waarbij wel moet opgemerkt worden dat beginnelingen niet zo op de hoogte zijn waarom er verschillen zijn, en dat deze voor 98% te wijten zijn aan de fouten in Internet Explorer en voor 2% aan hun CSS schrijfwijze.
Dus beste beginneling, als er verschillen optreden tussen IE en FireFox, de fout ligt bij IE en niet aan FireFox of Opera ofzelfs aan je CSS code, alhoewel je deze moet aanpassen om het probleem op te lossen om je layout hetzelfde te krijgen in IE en de beteren.

De problemen

  1. je hebt dubbel zoveel spatie in IE dan in FireFox - Oplossing
  2. cijfers of/en letters worden herhaald onderaan de pagina in IE - Oplossing
  3. afstanden tussen elementen zijn niet hetzelfde bij browsers - Oplossing: plaats bovenaan vanaf nu altijd deze CSS code : * {margin: 0; padding: 0; }
  4. in elementen die je met float voorzien hebt duikt opeens een extra spatie op van juist 3px in IE - Oplossing
  5. je hebt links gestyled, maar het werkt niet want je hebt niet de juiste volgorde gebruikt - Oplossing
  6. je hebt een genummerde lijst aangemaakt via <ol> en de nummers kloppen niet meer in IE - Oplossing
  7. je maakt gebruik van conditional comments, maar het werkt niet - Oplossing
  8. je hebt <abbr> gebruikt, maar IE toont het niet hoe zwaar je deze ook gestyld hebt - Oplossing
  9. je blok-elementen (boxen, containers) zijn niet van gelijke afmeting in IE dan in FireFox - Oplossing
  10. je site wordt in IE eventjes getoond zonder opmaak, dan opeens wel - Oplossing
  11. je CSS wordt onoverzichtelijk omdat je elke bepaling apart hebt geschreven - Oplossing
  12. je hebt een element voorzien van een float, maar de inhoud wordt niet getoond in FireFox of Opera - Oplossing
  13. je hebt een element gestyled maar in de browser zie je daarvan niets - Oplossing 1 - Oplossing2 - Oplossing 3
  14. je wil een element positioneren, maar het lukt maar niet zoals je het wenst - Oplossing
  15. je font-size is niet hetzelfde in verschillende browsers - Oplossing
  16. je maakt gebruik van line-height maar dit werkt niet zoals verwacht - Oplossing
  17. je hebt 100derden lettertypes op je computer staan, en je gebruikt de mooiste ervan voor je website, maar je bezoekers hebben deze lettertypes niet - Oplossing
  18. je wenst een achtergrondafbeelding te gebruiken maar weet niet juist hoe - Oplossing
  19. je hebt meerder kolommen dan toch klaargekregen, maar ze zijn niet evenhoog, ze verschillen in lengte - Oplossing
  20. het lukt je maar niet een 3 kolommen website te maken - Oplossing
  21. je bent niet tevreden met 3 kolommen, je wenst er 4 - Oplossing
  22. je weet kompleet niet waarover ik het hier heb, je weet niet hoe je moet beginnen met CSS - Oplossing of Oplossing op Nono
  23. je maakt gebruik van Flash op je website en die kl*te validator zegt je keer op keer dat je fouten hebt in je document - Oplossing
  24. je bent al een beetje gevorderd met CSS en je bent heftig aan het floaten geraakt, maar je weet niet goed hoe je deze moet clearen - Oplossing
  25. je hebt een horizontale lijn in je document <hr> maar je krijgt hem maar niet gestyled - Oplossing
  26. je wenst dat je layout 100% hoog is, ook al is er weinig of geen inhoud - Oplossing
  27. je kan al bijna alles positioneren, maar verticaal positioneren lukt je net niet - Oplossing

Besluit, slotwoord

Hoewel elk genoemd probleem een oplossing heeft op Gigadesign - dit is geen manier om extra bezoekers te krijgen, en ik sta er ook versteld van hoeveel oplossingen ikzelf al bijeen heb geschreven - zijn deze ook te vinden op t’internet maar dan weliswaar in een andere taal en als je als beginner nog eens in een andere taal moet zoeken naar oplossingen voor problemen die je zowiezo al niet echt goed begrijpt al beginner, lijkt mij deze lijst toch handig.
Geloof mij vrij, zelfs ik heb daar gestaan waar velen nu zullen staan, ik heb soms ontzettend lang gemattelt met CSS tot ik uiteindelijk mijn layout zo had zoals ik het wilde. Maar ik heb volgehouden, en deze raad kan ik je als beginner ook maar geven: volhouden.

Dit artikel staat eveneens op Nono