Blog om foto, web og brugervenlighed

Grafik/baggrundsbillede forsvinder i Internet Explorer (IE)

december 3rd, 2007. Kategori: Browser bugs and fixes, Webudvikling

Runde hjørner

På et webprojekt på multimediedesigner uddannelsen havde vi lavet en række bokse med runde hjørner. Grafikken var hæftet på en række div tags som baggrundsbilleder(backgroundimage), i en spalte som var floated til venstre.

Display bug

Det virker fint i både Firefox og Internet Explorer. Indtil vi scrollede ned og så op igen. Nu var der pludselig forsvundet dele af grafikken i IE. Første tanke var selvfølgelig peekaboo-bugen, men den er ofte beskrevet omvendt. Altså at tingene er væk fra starten og så dukker op, når man har scrollet væk og så tilbage.

Løsningen

Jeg prøvede et par af de løsningsforslag, man kan finde til peekaboo-buggen, men uden held. Lidt mere søgen førte til en artikel på CommunityMX, der beskriver forskellige IE display bug. Artiklens udgangs punkt var, at et væld af IE bugs stammer fra problemer med float og manglende angivelse på dimensioner af div-bokse. Idéen med vores bokse var netop, at de skulle være dynamiske, og derfor selvfølgelig ikke havde fået angivet nogen højde.

En hurtig test med følgende hack placeret efter det div tag vi mistænkte for miseren:

/* Hides from IE5-mac \*/
* html .problemboks {height: 1%;}
/* End hide from IE5-mac */

Og sørme om det ikke virkede. For en udførlig forklaring på hacket, og et par andre løsningsforslag på lignende bugs check selv artiklen på CommunityMX.

I denne artikel beskriver jeg ikke færre end 3 løsninger med elementer der forsvinder i Internet Explorer 6