div disappearing in IE7

Question

I have a problem with a div in IE7, it's disappearing and I don't understand why. I already tried to add zoom:1 and overflow: hidden as someone suggested but it is not working.

The div is inside an unordered list (floated left) as the last element, floated right.

This is the HTML

<div id="top_menu">
    <ul id="dropmenu">
        <li>menu item1</li>
        <li>menu item2</li>
        ...
     </ul>
    <div class="lang">content</div>
</div><!-- end top menu -->

This is the CSS

  #top_menu                     {width:900px;font-size:13px; }
    #top_menu ul#dropmenu           {width:630px; height:28px; margin:0px; padding:0px; list-style:none; float:left; }
    #top_menu ul#dropmenu li        {float:left;display:block;}
    .clearfix                       {display: inline-block;}  /* for IE/Mac */

    #top_menu .lang { width: 120px; color:#fff; margin:4px 10px 0 0; float: right; }
    #top_menu .lang a{ color:#ff8601; }
    #top_menu .lang a:hover{ color:#fff; }

Thanks for your help

EDIT: I included the html and removed url to avoid client complaints.

Answer 1

You need to add .clearfix to div#top_menu and add height: 24px; to div.lang

That fixed all the menu problems for me.

edit

...and probably don't use absolute positioning to solve layout issues.

Answer 2

i'm on IE9 now, but putting this site into "Compatibility View" seems to show the issue too.

The last entry in the main menu [ul] seems to extend all the way to the right of the element. This appears in markup before the.lang div so I wouldn't expect it to be covering it up...

Have you maybe tried putting the.lang element into "position:absolute" and then seeing if it shows up, (obviously assuming the parent element of it is positioned relatively). After that maybe try absolute with a top of 20px or so and see if it shows up then.

Good Luck!

UPDATE

Hang on a tick there. your.lang div is inside the [ul] element so is actually incorrectly positioned, since the only element allowed as a child of a [ul] is a [li].

Why not try taking this div out of the list and have it instead, just outside, as a child of the #top_menu element....?

That might work!

Answer 3

Not sure if this is relevant to your situation, but some versions of IE will throw away empty divs; if the div doesn't contain anything, adding something like  will force it to exist.