Disappearing HTML/DIV elements in Internet Explorer [IE]

October 4th, 2008 by Nikhil

As usual, one of the many some strange problems with IE and this one must ranks in TOP 10 of IE Quirks.

PROBLEM STATEMENT (This was my problem, maybe you have similar misbehaviors):
I have many DIV’s in the page with class “sectionhead” , which is nothing but title of a section on the page. So I have some style looking like this

.sectionhead{font-size:18px; background:#cfcfcf; padding:5px;}

The div is a light grey bar with some black text. What happens in IE is some of these section headers are displayed ok, but some are invisible, UNTIL, you scroll the page or click something on the page etc. Sometime they tend to disappear when you click the ‘alt’ key when you page down or scroll with the scroll bar. They sometimes seem to reappear when you reload (f5) the page. I short a perfectly simple DIV with some simple style behaves BAD.
What could cause such an erratic behavior? Well! Frankly, NO IDEA!!!

POSSIBLE SOLUTION:
Again don’t ask me why, but in many instances this problem tends to vanish when you add position:relative to the mis behaving elements style, like this

.sectionhead{font-size:18px; background:#cfcfcf; padding:5px; position:relative }

Weird but what to say? God Bless me from IE!

AND DO SHARE WITH US, IF YOU HAD SIMILAR PROBLEMS.

Tags: , , ,


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter