Mozilla Problem with asp:menu

Will · April 23rd, 2009, 05:06 AM

I am building a nav structure using the asp.net menu feature but I am having some problems styling it correctly. It displays fine in IE but not in Mozilla. I have the following code for my master page:

Code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<%@ Register src="userControl/header.ascx" tagname="header" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Chill Out of School</title>
    <meta name="keywords" content="After School, Play Scheme, Kids Playcentre, Breakfast Club, Kids Club, Chill Out of School, Out of School Clubs, Kids 3-12 Clubs, Knollmead, Hillcroft College, Our Lady Immaculate School" />
    <meta name="description" content="Chill Out of School is a collection of Breakfast and after school clubs for kids age 3-12 years old. Chill Out is open to all children in the local community and currently have 3 centres located in Tolworth." />
    <link href="COS.css" rel="stylesheet" type="text/css" />  
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <!-- ******* Container ******* -->
        <div id="container"> 
        
            <!--******* Logo ******* -->
            <div id="logo">
                <uc1:header ID="header1" runat="server" />
            </div> <!-- ******* End of Logo ******* -->
            
             <!-- ******* Menu ******* -->
            <div id="menu-top"></div>
            <div id="menu">
                
                <!--******** Navigation ******-->
            <!--    <div id="menu-inner"> -->
                    <asp:SiteMapDataSource ID="CoSSiteMap" runat="server" ShowStartingNode="false" />
                    <asp:Menu ID="Menu1" runat="server" DataSourceID="COSSiteMap" Orientation="Horizontal" CssClass="menu">
                        <StaticItemTemplate>
                            <div id="menu-img">
                                <br /><br />
                                <%#Eval("Text")%>
                            </div>  
                        </StaticItemTemplate>  
                    </asp:Menu>
                   
          <!--      </div> ******* End of Navigation ******-->
                
            </div>
            <div id="menu-bottom"></div>
            <div id="sub-menu">
            
            </div>  <!-- ******* End of Menu ******* -->
            
            <!-- ******* Inner-Container ******* -->
            <div id="container-Inner">
                <div id="left-bg"></div>
                
                <!-- ******* Content ******* -->
                <div id="content">
                    <div id="main-top"></div>
                
                    <div id="main">
                        <asp:ContentPlaceHolder id="mainContent" runat="server">
                            <p>
                            </p>
                        </asp:ContentPlaceHolder>
                    </div>
                       
                    <div id="main-bottom"></div>
                </div>  <!-- ******* Content ******* -->
                <div id="right-bg"></div>
                </div>  <!-- ******* End of Inner-Container ******* -->
    
            </div> <!-- ******* End of Container ******* -->
            
            <!-- ******* Footer ******* -->
            <div id="footer-top"></div>
            <div id="footer">
            </div>  <!-- ******* Footer ******* -->
    </form>
</body>
</html>
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<%@ Register src="userControl/header.ascx" tagname="header" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Chill Out of School</title>
    <meta name="keywords" content="After School, Play Scheme, Kids Playcentre, Breakfast Club, Kids Club, Chill Out of School, Out of School Clubs, Kids 3-12 Clubs, Knollmead, Hillcroft College, Our Lady Immaculate School" />
    <meta name="description" content="Chill Out of School is a collection of Breakfast and after school clubs for kids age 3-12 years old. Chill Out is open to all children in the local community and currently have 3 centres located in Tolworth." />
    <link href="COS.css" rel="stylesheet" type="text/css" />  
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <!-- ******* Container ******* -->
        <div id="container"> 
        
            <!--******* Logo ******* -->
            <div id="logo">
                <uc1:header ID="header1" runat="server" />
            </div> <!-- ******* End of Logo ******* -->
            
             <!-- ******* Menu ******* -->
            <div id="menu-top"></div>
            <div id="menu">
                
                <!--******** Navigation ******-->
            <!--    <div id="menu-inner"> -->
                    <asp:SiteMapDataSource ID="CoSSiteMap" runat="server" ShowStartingNode="false" />
                    <asp:Menu ID="Menu1" runat="server" DataSourceID="COSSiteMap" Orientation="Horizontal" CssClass="menu">
                        <StaticItemTemplate>
                            <div id="menu-img">
                                <br /><br />
                                <%#Eval("Text")%>
                            </div>  
                        </StaticItemTemplate>  
                    </asp:Menu>
                   
          <!--      </div> ******* End of Navigation ******-->
                
            </div>
            <div id="menu-bottom"></div>
            <div id="sub-menu">
            
            </div>  <!-- ******* End of Menu ******* -->
            
            <!-- ******* Inner-Container ******* -->
            <div id="container-Inner">
                <div id="left-bg"></div>
                
                <!-- ******* Content ******* -->
                <div id="content">
                    <div id="main-top"></div>
                
                    <div id="main">
                        <asp:ContentPlaceHolder id="mainContent" runat="server">
                            <p>
                            </p>
                        </asp:ContentPlaceHolder>
                    </div>
                       
                    <div id="main-bottom"></div>
                </div>  <!-- ******* Content ******* -->
                <div id="right-bg"></div>
                </div>  <!-- ******* End of Inner-Container ******* -->
    
            </div> <!-- ******* End of Container ******* -->
            
            <!-- ******* Footer ******* -->
            <div id="footer-top"></div>
            <div id="footer">
            </div>  <!-- ******* Footer ******* -->
    </form>
</body>
</html>

And I have the following for CSS so far:

Code:

/*****************************/
/********** Generic **********/
/*****************************/

body
{
    top: 0px;
    padding: 0px;
    margin: 0 auto;
    height: 100%;
    font: 'Comic Sans MS';
    background: #0099FF url('Images/bgmain.jpg') repeat-x left top;
}

form 
{
    top: 0px;
    margin: 0px;
    padding: 0px;
}

#container
{
    margin: 0 auto;
    width: 1030px;
}

#logo
{
     margin: 0 auto;
     width: 210px;
     height: 90px;
}

#container-Inner
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 100%;
}

/********************************/
/******** End of Generic ********/
/********************************/


/**********************/
/******** Menu ********/
/**********************/

#menu-top
{
    height: 18px;
    background: url('images/menu_top.jpg') no-repeat top;
}

#menu
{
    margin: 0 auto;
    padding: 0px;
    height: 54px;
    width: 770px;
    background: #FFF;
}

/* Fixes keeps the layout of the rest of the page */
#menu-img
{
    width: 70px;
    height: 55px;
    margin-left: 45px;
    display: inherit;
    
      /**background: url("images/menu_img.jpg") 0 0 no-repeat;**/
}

.menu a
{
    width: 69px;
    list-style-type: none;
    background: url("images/menu_img.jpg") 0 0 no-repeat;
    z-index: 100;
    display: inherit;
    }

.menu a:hover
{
    background-position: -79px 0;
    z-index: 100;
    display: inherit;
    
}

.menu a:active
{
    background-position: -158px 0;
    z-index: 100;
    display: inherit;
    
}

#sub-menu
{
    margin: 0 auto;
    height: 43px;
    background: url('Images/sub_menu.jpg') no-repeat bottom;  
}

#menu-bottom
{
    height: 18px;
    margin-bottom: 5px;
    background: url('Images/menu_btm.jpg') no-repeat bottom;
}

/*****************************/
/******** End of Menu ********/
/*****************************/


/*****************************/
/******** Main Content ********/
/*****************************/

#content
{
    width: 770px;
    margin: 0 auto;
    padding: 0px;
    float: left;
    clear: right;
    height: 449px;
}

#left-bg
{
    float: left;
    clear: right;
    width: 130px;
    height: 499px;
    background: url('Images/main_left.jpg') no-repeat right top;
}

#right-bg
{
    float: right;
    width: 130px;
    height: 499px;
    background: url('Images/main_right.jpg') no-repeat left top;
}

#main
{
    clear: right;
    width: 770px;
    min-height: 425px; 
    margin: 0 auto;
    background: #FFF;
}

#main-top
{
    clear: right;
    padding: 0px;
    width: 770px;
    height: 25px;
    background: #FFF url('Images/main_top.jpg') no-repeat top;
}

#main-bottom
{
    clear: right;
    margin: 0 auto;
    padding: 0px;
    width: 770px;
    height: 25px;
    background: #FFF url('Images/main_btm.jpg') no-repeat top;
}

/*************************************/
/******** End of Main Content ********/
/*************************************/


/*****************************/
/******** Footer *************/
/*****************************/

#footer-top
{
    clear: right;
    margin: 0 auto;
    width: 770px;
    height: 23px;
    background: #FFF url('Images/footer_top.jpg') no-repeat bottom;
}

#footer
{
    clear: right;
    margin: 0 auto;
    width: 100%;
    height: 73px;
    background: #FFF url('Images/footer.jpg') no-repeat top;
}

/*******************************/
/******** End of Footer ********/
/*******************************/

The sitemap is here:

Code:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/" title="Root"  description="Root">
        <siteMapNode url="~/Default.aspx" title="Home"  description="Chill Out of School Home" />
        <siteMapNode url="~/Services.aspx" title="Services" description="Chill Out of School Sevices" />
        <siteMapNode url="~/Booking.aspx" title="Bookings"  description="Book available dates at our centres" />
        <siteMapNode url="~/Gallery.aspx" title="Gallery" description="Chill Out of School Gallery" />
        <siteMapNode url="~/Jobs.aspx" title="Jobs" description="Job Vacancies for Chill Out of School" />
        <siteMapNode url="~/Contact.aspx" title="Contact Us" description="Chill Out of School Contact Page" />
    </siteMapNode>
</siteMap>

Any help would be good. Like I said works fine in IE but not in Mozilla.