More and more people are using css on their websites to position text and images, which is a good thing but please check across all web browsers!
In the past week I have come across several websites that display fine in IE but fail in standard compliant web browsers such as Firefox or Opera. One of the main problems is the ‘null content bug’.
Many people use css in their websites to display an image as a background, leaving the div itself empty;
<div id=’advert’></div>
#advert {position: relative; float: right; width: 20em; background: url(background.gif) no-repeat top left;}
IE works fine with this, it will take the height of the image and set the height of the div to that of the image, however standard compliant web browsers look at the content within the div to ascertain the height. As in the example above the div is empty so collapses to 0 height. This means that the entire div including the background image is effectively invisible.
The solution
This is a simple one but one that catches many an experienced web developer out, add the height attribute to your css. Just by adding say height: 10em will give all web browsers a set height of the div and display correctly as you intended.
The morale
Always check your website in as many web browsers as possible, al web developers should do this as standard course.
0 Responses to “Div disappearing in Firefox?”