Gap in IE6

Hello All,

A gap appears in my site under the horizontal navigation bar in IE6, but not in Safari, Firefox, or Opera. I can't figure out where the problem is.

The temporary location of the site is:
http://www333.pair.com/mlevy/cvoeo/template-tester.html

The links to the css are:
http://www333.pair.com/mlevy/cvoeo/common/styles.css
http://www333.pair.com/mlevy/cvoeo/common/dropdown.css

If anyone could help me, I'd be very thankful.

Michael

 

This is the culprit:

<p class="clearme"></p>

Code (markup):

IE preserves the height of the font's line-height. That makes that empty <p> about 19px high at the default font size. You should note that the W3 says that empty p elements should be ignored, and strongly suggests that all empty block elements be ignored.

To cover all bases, do

.clearme {
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
    }
===========
<p class="clearme">.</p>

Code (markup):

cheers,

gary

 

Thanks for your suggestion Gary. I tried it out, but it didn't have any effect. Even when the "<p class="clearme">.</p>" is commented out, the space is still there. My guess is that it has something to do with the positioning within the drop down menu. I've spent about ten hours messing around with the drop down menus. I ended up just copying code out of a book, but it still baffles me.
I actually did the drop downs last. So everything else should be OK.

Does anyone have any other suggestions?

Thanks,
Michael

 

Hi Michael,

I would suggest you to set margin-bottom to zero in the listmenu container or margin-top to zero in the contentwrapper container. Does it work?

 

You have a nesting problem with your lists (just above <p class="clearme">.</p>).
Try to validate the code.