Fun with DIVs

Album Cover: No Code

"Are you woman enough to be my man?"
Pearl Jam / Hail Hail

Posted on June 07, 2003 9:18 PM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

While working on a redesign of my Coldplay site this afternoon, I ran into a very annoying "problem" (since I don't think it's actually a bug) with Mozilla/Firebird's handling of DIV background colors.

It was driving me batty for at least an hour, especially since it was showing up as I intended in Internet Explorer 6 for Windows. However, I've learned from the past that just because something shows up as intended in IE doesn't necessarily mean it was coded correctly.

After experimenting with a managerie of changes to my stylesheet, I finally realized that merely removing float: left; and float: right; from two DIVs within one larger container DIV eradicated the problem, and background colors showed up as expected.

I eventually ran into a helpful thread in a CSS discussion forum that explained the problem. A post in that particular thread read as follows:

[Because] there's nothing actually in the original DIV some browsers won't show it. Getting rid of the float does put stuff into the div and gives it some height.
So apparently, a DIV is not considered to be content of its parent DIV in Gecko. I plan on using a hack similar to that proposed in the thread, supplying some sort of blank span that will fake the Gecko rendering engine into believing the parent DIV actually does have height, and that its background color should be painted accordingly.

Hey, if it weren't for these bizarre discrepencies between browsers, would we ever learn anything? Maybe how to better utilize our spare time ;)

Comments

No one has added any comments.

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.