Internet Explorer Issues -- Reformatting List inside Div on
Here's my code barebones. It works well in Firefox,Chrome, and Safari.Not in IE. My apologies in advance for using fractional ems and width and height %s. I'm basically coding a really simple dropdown menu and probably wouldn't even touch Jquery if not for IE on this. When I look at the menu in IE6, it puts every year and month in a single column as opposed to having a column for every year (as I want it). I know this isn't horribly difficult, but I'm having a real time with it. Thanks in advance. -Jesse
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ul
{
list-style:none;
margin:0;
}
/*========================MENU==========================*/
#menu
{
position:absolute;
top:5em;
left:0;
padding:.1em 0em;
display:inline;
font-family:arial;
width:100%;
}
#menu li.menuitem
{
float:left;
padding:.5em 1.5em;
}
#menu li.noclick div
{
display:none;
padding:0em;
white-space:nowrap;
z-index:50;
position:absolute;
top:2.2em;
}
#menu li.noclick:hover div
{
display:block;
}
#menu li.click:hover
{
text-decoration:underline;
}
/*=======================SUB_MENU=======================*/
ul.sub_nav_col
{
float:left;
padding:0;
}
li.sub_nav_head, li.sub_nav_item
{
font-size:.8em;
padding:0em .5em .1em .5em;
}
li.sub_nav_item a
{
display:block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#menu li.noclick").hover(
function()
{
$("div", this).css("display", "block");
},
function()
{
$("div", this).css("display", "none");
});
});
</script>
<title>TITLE</title>
</head>
<body>
<ul id="menu">
<li class="menuitem click"><a href="#">Home</a></li>
<li class="menuitem noclick"><a href="#">Month-by-Month</a>
<div id="month_year_sub">
<ul class="sub_nav_col">
<li class="sub_nav_head">2009</li>
<li class="sub_nav_item"><a href="Jan 2009.pdf"> January</a></li>
<li class="sub_nav_item"><a href="February 2009.pdf">February</a></li>
<li class="sub_nav_item"><a href="March 2009.pdf">March</a></li>
</ul>
<ul class="sub_nav_col">
<li class="sub_nav_head">2008</li>
<li class="sub_nav_item"><a href="January 2008.pdf">January</a></li>
<li class="sub_nav_item"><a href="February 2008.pdf">February</a></li>
<li class="sub_nav_item"><a href="March 2008.pdf">March</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>