Drilagtige billeder
Billeder i tabel-celler i HTML har længe været betragtet som “dårligt design”, men det er nemt at arbejde med, og det er meget anvendt, så måske er du stødt på dette problem selv.
Billeder, <img> tags altså, placeres som standard på “baseline”, dvs. den linie som bogstaverne i en eventuel tilstødende tekst “står på”. Eftersom visse bogstaver, f.eks. “g” går nedenunder denne linie, vil der i f.eks. en tabel-celle blive afsat vertikal plads under et billede, hvis cellen også indeholder tekst. Eksempel ses på billedet, hvor tabel-cellen er markeret med rødt.
Eller… sådan var det.
Hidtil har “problemet” nemlig kunnet løses ved at sørge for at cellen ikke indeholdt tekst eller whitespace. Nu lader det til (det er sikkert ikke noget der er sket for nylig, jeg har bare ikke bemærket det før nu) at i hvert fald Mozilla har ændret deres rendering engine så pladsen under baseline inkluderes selvom cellen ikke indeholder tekst eller whitespace.
Løsningen, ja den er ret enkel. Billedet skal blot have ændret sin vertikale justering til noget andet end “baseline”. Det opnås enten ved at give <img> elementet en “align” attribut — alle andre værdier end “baseline” og “bottom” virker, f.eks. “top” eller “middle” — eller ved at style billedet med CSS — så virker f.eks. “vertical-align: top” fint. Resultatet ses på billedet.