trouble with list displaying in IE

need horizontal list

[Sarah Atkinson]

I need a list menu (similar to the sucker fish but not the suckerfish menu)

It desplays just fine in Motzilla but falls apart in IE.

IN IE it desplays with each <li> taking up 1005 of a line instead of next to each other.

html

<ul id="p7PMnav">
<li><a href="index.php"><b>Home</b></a></li>
<li><a href="about.php" class="p7PMtrg">About Us</a>
<ul>
<li><a href="history.php">History</a></li>
<li><a href="board.php">Board of Directors</a></li>
<li><a href="contact.php#staffdirectory">Staff Directory</a></li>
<li><a href="annualreports.php">Annual Reports</a></li>
<li><a href="partners.php">Partners</a></li>
</ul>
</li>
<li><a href="programs.php" class="p7PMtrg">Programs</a>
<ul>
<li><a href="athletics.php">Athletics &amp; Aquatics</a></li>
<li><a href="bbbs.php">Big Brothers Big Sisters</a></li>
<li><a href="bagc.php">Boys &amp; Girls Club</a></li>
<li><a href="tcourt.php">Teen Court</a></li>
<li><a href="cyc.php">Columbus Youth Camp</a></li>
<li><a href="youthresources.php">Youth As Resources</a></li>
</ul>
</li>
<li><a href="rentals.php">Rentals </a></li>
<li><a href="special.php">Special Events</a></li>
<li><a href="photos.php">Photo Gallery</a></li>
<li><a href="contribute.php">Contribute</a></li>
<li><a href="contact.php">Contact Us</a></li>
<!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
<!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->
</ul>

and the CSS

#p7PMnav {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
width:100%;
}
#p7PMnav li {
float:left;
font-family : Verdana, Lucida, Arial, Helvetica, Sans-serif;
font-size: 10px;
letter-spacing : 0px;
font-weight: bold;
padding: 5px 0 5px 0;
background : none;
list-style-type: none;
margin: 0;
border-bottom:none;
}
#p7PMnav ul {
display:inline;
margin: 0;
padding: 0;
background-color: #a7e1fb;
position: absolute;
left: -9000px;
z-index: 10000;
}
#p7PMnav a {
background-color:#A7E1FB;
margin: 0;
padding: 5px 10px;
display: block;
text-decoration: none;
color: #006;
line-height:1;
border-right: 1px solid #6A7094;
border-bottom:none;

}
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
background-color: #ffe473;
color: #FB027C;
letter-spacing: 0;
}

/* ------ the current page marker style ------ */
#p7PMnav .p7PMmark {
color: #FBE473;
}
/* ------ the trigger link styles ------- */

/*the trigger link */
#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {

}
/* the active trigger link style */
#p7PMnav .p7PMon {
background-color: #0066FF;
color: #FFFFFF;
}
/*the submenu classes */

#p7PMnav .p7PMhide {
left: -9000px;
}
#p7PMnav .p7PMshow {
left: auto;
z-index: 20000!important;
}
/* Top level menu width */
#p7PMnav li {
float: left;
width:auto;
}
#p7PMnav ul li {
float: none;
}
#p7PMnav ul, #p7PMnav ul li {
/*width: 60%;*/
}

[Sarah Atkinson]

I think my problem is seting the width. I want the width to be based on the amount of text and firefox seems to ajust to that but IE makes the width eather a set amount of 100% of the screen.

Any way arounf this?

[Arno_Adams]

Hi Sarah

Doesn't the Project7 extension come with a manual?
You could use conditional comments to make sure IE behaves.

HTH, AA