Gigadesign, XHTML-CSS website maken

Zonder dat een browser crasht?

Als je ooit een theme maakt voor Drupal, zal het je ongetwijfelt opvallen dat Drupal een heel deel alsook lange classes toevoegt aan elementen, in het begin was dit zeer frustrerend, maar na verloop van tijd heeft het zo zijn voordelen.

Toen heb ik eens iemand horen beweren (er werd gezegd dat dit de beste HTML/CSS’er van België is) dat IE6 problemen heeft als er meer als 5 classes aan een element hangen.

Onlogisch, maar waar

Tot mijn grote schaamte vandaag moeten ondervinden dat text-align: center ook werkt voor inline-block elementen zoals afbeeldingen!!!
Dus stel je hebt een <div> als container, de afbeeldingen die erin voorkomen worden dynamisch geladen, en via JavaScript heb je dan nog eens een scroll/replace functie.

Veel uitleg hoeft daar niet bij:
CSS Snippets

Bezint eer ge begint!!

Drupal themen is niet een alledaagse ding waar je zomaar aan kan beginnen zoals bijvoorbeeld Wordpress themen, Drupal themen is een uitzichtloze zaak als je niet eerst Drupal’s opbouw begrijpt, er zijn nodes, views, listviews en blocks.

Het wordt pas een héél groot probleem als je een webstandaarden-mens bent zoals ik!!, Drupal heeft standaard een xHTML Strict 1.0 Doctype, en alle code die gegenereerd wordt dor Drupal zelf is valide xHTML Strict 1.0, maaaar … de code opbouw is niet zo correct.

Zo heeft Drupal de neiging als je in de backend bepaalt dat een ingevoerde afbeelding een link moet worden naar bijvoorbeeld een detail-view, deze afbeelding te omkaderen met maar liefst 5 à 6 divs !!!

Wie had dat gedacht

Het lijkt er inderdaad op dat ik betaald wordt om te bloggen, althans dat is wat ik als competence-lead elke maand minstens 2 keer moet doen van mijn werkgever. Bloggen over mijn werk op mijn werk, wie had dat ooit gedacht?

Een lijstje

Hierzo een lijstje van wat ik reeds geblogt heb, allemaal artikels die eigenlijk hier op Gigadesign ook hadden kunen staan:

Kijk uw projecten eens na!

Onlangs pas heb ik deze bug ontdekt dat als je een achtergrond-afbeelding zet via CSS op een input field type text, dat in IE6 & IE7 (inderdaad, bug zit er nog steeds in) de achtergrond-afbeelding wegschuift als er meer data in het veld invoerd wordt als dat het visueel kan bevatten. Moeilijke uitleg, maar zal ik je even tonen:

Inheritance

Inheritance is het overerven van eigenschappen (CSS) van het parent element naar het child element

Dit is een goede zaak, je hoeft niet telkens opnieuw eigenschappen te gaan bepalen, de overerving doet dit voor jouw, bijvoorbeeld:

Als webdeveloper wel te verstaan

Als webdeveloper/slicer zit je altijd weer met hetzelfde probleem als je aan een nieuw project begint “crossbrowser” of zo 99%-tig mogelijk, pixel-neukende klanten zorgen ervoor dat dit je dagdagelijkse uitdaging is. Nu crossbrowser is geen probleem voor mij, daar ik van begin af aan al alle gekende browser-bugs omzeil, maar ik ben niet iedereen, daarom zal ik je vandaag weer een tip geven in de richting, en ook weer een bewijs dat crossbrowser css’en zonder hacks mogelijk is.

CSS Oplossing

Zoals ik in een vorig artikel vroeg hoe jij een voorgesteld probleem zou oplossen, kan ik dus nu één van de misschien meerdere oplossingen geven:

Het probleem was dus dat er in Internet explorer 6 een <div> element niet stopte op een paats waar hij normaal niet kan zijn, door er een kleur aan te geven was dit duidelijk zichtbaar.

In de comments werd aangeraden om dit te doen:

They are a real pain in the ass

Op mijn werk, doe ik verschillende projecten samen met Kristof & Kevin.
Samen doen wij o.a. theme development voor Drupal gestuurde websites, wij developen zo hard zodat de views en nodes ons om de oren suizen, maar wij botsen (aléé het is te zeggen, ik, daar ik de CSS doe) altijd op hetzelfde probleem:
De standaard CSS files die in de core van Drupal zitten.