Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 3.5 > ASP.NET 3.5 Basics
|
ASP.NET 3.5 Basics If you are new to ASP or ASP.NET programming with version 3.5, this is the forum to begin asking questions. Please also see the Visual Web Developer 2008 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 3.5 Basics section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 23rd, 2009, 05:06 AM
Friend of Wrox
 
Join Date: Feb 2009
Posts: 194
Thanks: 5
Thanked 3 Times in 3 Posts
Default Mozilla Problem with asp:menu

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.





Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem with using AJAX in Mozilla vinay.sindri XML 2 January 25th, 2008 10:30 AM
Asp.Net 2 Horizontal Menu Display Problem ivotive ASP.NET 2.0 Professional 1 December 15th, 2006 04:28 AM
alignment problem in IE and Mozilla rpalanivelu Javascript 2 November 17th, 2003 08:37 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.