I'm sure this is some standard idea I'm missing relating to CSS and Unordered lists. I'm attempting to understand using unordered lists for menus(using housemenu from houseofnuke.com). To help learn it I've created a simple page, couple wrappers and the house menu. I"m attempting to display it horizontally, and slowly adding bits of code to the CSS to see what changes. This is my way of learning, I'm sure it's similar for most of you.
The behavior of unordered lists in IE7.0(not sure if earlier versions also), in standards compliance mode baffles me. To view the behavior I've created a page with drop down sub menus(hover over the "skin" menu) here: http://www.dnnreactor.com/Skins/tabid/186/Default.aspx . Actually no need to hover, I didn't put that part back in yet. it's pretty much stripped down.
The Why I'm looking for today, is...WHY the heck is there a big white box that says FALSE in my Unordered list, when it contains a list item containing an unordered list.
I'm using HouseOfNuke's house menu, but this can be duplicated with just straight HTML, and does not exhibit this behavior in Firefox(of course). I threw a couple borders around certain parts to highlight the area. notice the "false" area isn't highlighted, it's just like IE decided to throw it in there, it's not in the source view even.
Here is the ASCX file:
<%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register src="/Portals/0/~/DesktopModules/HouseMenuSkinObject/HouseMenuSkinObject.ascx" tagname="HouseMenuSkinObject" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="ControlPanel" runat="server">
</div>
<div id="wrapPage">
<div id="wrapHeader">
</div>
<div id="wrapMenu">
<uc1:HouseMenuSkinObject ID="HouseMenuSkinObject1"
Scope="-1"
ShowAdmin="true"
IsRecursive="true"
Orientation="h"
CssElementId="HouseMenuNav"
runat="server" />
</div>
<div id="wrapBody">
<div id="wrapContent">
<div id="ContentPane" runat="server">
</div>
</div>
</div>
</div>
And the CSS:
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
#wrapPage
{
width:90%;
margin: 0 auto;
}
#wrapMenu
{
width:100%;
background-color:Gray;
}
#HouseMenuNav
{
border:0px;
padding:0px;
list-style:none;
float:left;
white-space:nowrap;
}
#HouseMenuNav ul
{
width:100%;
}
#HouseMenuNav li
{
border:solid 1px black;
float:left;
}
#HouseMenuNav li ul li
{
border:solid 1px red;
float:left;
}