Recently I ran into a pretty frustrating IE7 bug that had to do with empty div tags. In the web app that I am working on there is some content that is hidden when the module loads, and then is displayed on a button click. An empty div where the content will be displayed is in the code even when the content is hidden … something like this:

<div id=”theHiddenStuff”></div>

In Firefox the empty div does not take up any space in the layout. However, in Internet Explorer the empty div was actually taking up space and throwing the design off. I played a little with the css to try to see what was going on. The obvious answer would have been that the div style had a height set in the css. I got in to remove the height and was disappointed to find that there was no height set on that div id.

Next I did what any professional css designer would do and pulled up Google. I found a lot of people with the same problem, but none of the solutions listed worked for me. There seemed to be everything from padding, to margin to spaces inside the empty div that were causing this in IE. Finally after a little more testing I found the solution.

My solution:
In my situation the problem ended up being that the div id had a width set in the styles. I wasn’t aware that setting a width had an inherent height that came along with it, but that looks to be the case in Internet Explorer 7. Pretty strange if you ask me, but removing the width fixed my issues. After a little more styling to accommodate for the missing width style, everything looked perfect in IE and FF.

If you try this with no success, try removing some other styles from your empty div or check out some of these other solutions.