div boxes are fine in FF, cant get them right in IE..

[Glen_S]

I'm hitting a snag in a site I am working on. I have a css fly-out drop-down menu residing below some div boxes, and what I want to do is have another div box with an image in it to sit just to the right of the menu. When I place the menu in its own div box and then specify another div box it renders fine in FF, but continues on in IE and does not render at all.

I'm not very up on css pages, but I have this page referring to 3 separate css pages, two of them are specific to the fly-out menu, one for IE and one for non IE browsers, the other defines my boxes and container etc. First of all, is this a problem and should I just move the box definitions to the other css file(s)? For some reason it renders one box definition fine from my styles.css file, but would not see another until I moved its definition over to the fly-out.css file.

the boxes in question are as follows in the css:

#box2 { float: left;
margin-left:0px;
margin-top: 0px;
height: 150px;
width: 200px;
border: none;
border-width: thin;
padding: 0px;
background: #C0C0C0;
font-size: small;}

#box4 { border: solid;
margin-left: 0px;
margin-top: 0px;
border-width: 2px;
height: 155px;
width: 131px;
padding: 0px;
float: left;

#box5 { border: solid;
margin-left: 1px;
margin-top: 0px;
border-width: 3px;
height: 155px;
width: 600px;
padding: 0px;
float: right;
background: #C0C0C0;}

Box2 I have 4 of side by side with each displaying an image, they are fine in IE and FF.
Box4 I am using to house the menu, then followed by box 5 which is supposed to be beside it. Here is a condensed version:

<div id="box4" class="menu">
<ul>
<li><a class="hide" href="../menu/xxx.html">APPLIANCES</a>

<!--[if lte IE 6]>
<a href="../menu/xxx.html">APPLIANCES
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../menu/xxx.html" title="We carry Whirpool,Iglis ">Washers & Dryers</a></li>
<li><a href="../menu/xxx.html" title="KitchenAid, Whirpool">Refrigerators & Freezers</a></li>
<li><a href="../menu/xxx.html" title="Panasonic ">Microwaves</a></li>
<li><a href="../menu/xxx.html" title="We feature KitchenAid">Dishwashers</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="xxx.html">FURNITURE</a>

<!--[if lte IE 6]>
<a href="xxx.html">FURNITURE
<table><tr><td>
<![endif]-->

<ul>
<li><a href="xxx.html" title="We have suites, frames, mattresses">Bedroom</a></li>
<li><a href="xxx.html" title="We feature Palliser, Ashley, Lazy-Boy">Living Room</a></li>
<li><a href="xxx.html" title="Dinettes, full suites">Kitchen</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</div>
<div id="box5"
</div>

This looks fine in FF, but in IE it looks like it is trying extend box4 and display box5 inside it, there for only showing a little of it.

Also, box2 is defined in my styles.css as is box5, but it would not see box5 unless I move its definition to the fly-out.css file? (I hope all this makes sense)

Can anyone see what I am missing here?

[Glen_S]

found it! turns out I was missing the:
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
after the last menu item...

knew it was something simple!