Why is my menu pop up in the wrong place?

I am writing a site to learn more hands on ASP.Net and CSS.
The snag I ran into was that the menucrontrol, <asp:menu> to exact is popping the dynamic part outside of the <DIV> box that it is in.

I'm using ASP.Net 2.0 and the DLL compiled CSS Friendly Adapter.
To see the problem itself look at http://www.jdproctor.net/Default.aspx
Style.css
div
{
    padding: 0px;
    margin: 0px;
}
 
ul
{
    
}
 
.columnlist
{
    list-style-image: url('/box1.gif');
    position: relative;
    right: 20px;
    padding-top: 10px;
}
 
li
{
    padding-top: 2px;
}
 
.nobullet
{
    list-style-image: none;
    list-style-type: none;
}
 
.mainpage
{
    border-style: solid;
    border-width: 1px;
    background-image: url('bacmain.gif');
    background-repeat: repeat-y;
    width: 780px;
}
 
.header
{
    float: left;
    width: 425px;
    height: 58px;
}
 
.logo
{
    width: 376px;
    height: 45px;
    float: left;
    background-image: url('/images/Logo.GIF');
}
 
.logodiag
{
    width: 49px;
    height: 45px;
    background-image: url('/images/03_03.gif');
}
 
.logobottom
{
    width: 425px;
    height: 13px;
    background-image: url('/images/05_05.gif');
}
 
.searchbox
{
    width: 355px;
    height: 58px;
    float: left;
    background-image: url('/images/04_04.gif');
}
 
.search
{
    border-width: 1px;
    text-align: center;
    width: 85%;
    background-image: url('bacmain.gif');
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    left: 25px;
    position: relative;
}
 
.headerspacer
{
    height: 20px;
}
 
.titlebar
{
    text-align: center;
    background-image: url('/images/linkbar_07.gif');
    width: 780px;
    height: 25px;
}
 
.body
{
    
}
 
.leftcolumn
{
    width: 177px;
    float: left;
}
 
.rightcolumn
{
    width: 177px;
    text-align: right;
}
 
.navigate
{
 
}
 
.sponsors
{
    
}
 
.links
{
    
}
 
.login
{
    
}
 
.loginspacer
{
    padding-left: 10px;
}
 
.boxheader
{
    
}
 
.boxheaderright
{
    position: relative;
    left: 2px;
}
 
.boxspacer
{
    width: 2px;
    float: left;
}
 
.boxend
{
    background-image: url('/images/end_03.gif');
    float: left;
    width: 6px;
    height: 24px;
}
 
.boxendright
{
    background-image: url('/images/end2_05.gif');
    width: 8px;
    height: 24px;
    position: relative;
    right: 2px;
}
 
.boxtitle
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 2px;
    color: #ffffff;
    width: 150px;
    height: 24px;
    background-image: url('/images/bartab_04.gif');
    float: left;
    text-align: center;
}
 
.boxtitleright
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 2px;
    color: #ffffff;
    width: 150px;
    height: 24px;
    background-image: url('/images/bartab2_04.gif');
    float: left;
    text-align: center;
}
 
.boxcorner
{
    width: 19px;
    height: 24px;
    background-image: url('/images/corner_05.gif');
}
 
.boxcornerright
{
    width: 17px;
    height: 24px;
    background-image: url('/images/corner2_03.gif');
    float: left;
    background-repeat: no-repeat;
}
 
.box
{
    border-style: solid;
    border-width: 1px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #0b3651;
    width: 173px;
}
 
.columnspacer
{
    height: 10px;   
}
 
.content
{
    padding: 3px;
    border-style: solid;
    border-width: 1px;
    margin: 3px;
    width: 410px;
    float: left;
    background-image: url('/images/bac_02.jpg');
    min-height:400px;
    height:auto !important;
    height:400px; 
}
 
.contentcolumn
{
    
}
 
.field
{
    float: left;
}
 
.fieldtitle
{
    font-family: 'Times New Roman' , Times, serif;
    font-weight: bold;
    float: left;
}
 
.fielddesc
{
    float: left;
}
 
.fielderror
{
    
}
 
.bodystyle
{
    font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 11px;   
}
 
Master.master
...
<div class="body">
            <div class="leftcolumn">
                <div class="navigate">
                    <div class="boxheader">
                        <div class="boxend">
                        </div>
                        <div class="boxtitle">
                            Navigation
                        </div>
                        <div class="boxcorner">
                        </div>
                    </div>
                    <div class="box">
                        <asp:Menu ID="Menu" DataSourceID="SiteMapDataSource" runat="server" 
                            StaticDisplayLevels="1" DynamicHorizontalOffset="-100">
                        </asp:Menu>
                    </div>
                </div>
                <div class="columnspacer">
                </div>
...

Open in new window

jpmonnAsked:
Who is Participating?
 
aibusinesssolutionsConnect With a Mentor Commented:
You need to specify the styles in the Menu tag.

<asp:Menu ID="Menu" DataSourceID="SiteMapDataSource" runat="server"
                            StaticDisplayLevels="1" DynamicHorizontalOffset="-100">

<StaticMenuItemStyle CssClass="TopMenuNormal" />
<DynamicHoverStyle CssClass="DropdownMenuHover" />
etc..

</asp:Menu>
0
 
aibusinesssolutionsCommented:
Viewing the source of your page, it looks like you don't have the CSS styles setup properly.

Here is the menu code that you currently have.
<div class="AspNet-Menu-Vertical" id="ctl00_Menu">
    <ul class="AspNet-Menu">
        <li class="AspNet-Menu-Leaf  AspNet-Menu-Selected"><a href="/Default.aspx" class="AspNet-Menu-Link  AspNet-Menu-Selected"
            title="Home Page">Home</a> </li>
        <li class="AspNet-Menu-WithChildren"><a href="/News.aspx" class="AspNet-Menu-Link"
            title="Recent News">News</a>
            <ul>
                <li class="AspNet-Menu-WithChildren"><a href="/Archive/Archive.aspx" class="AspNet-Menu-Link"
                    title="Archive of previous news.">Archive</a>
                    <ul>
                        <li class="AspNet-Menu-Leaf"><a href="/Archive/January09.aspx" class="AspNet-Menu-Link"
                            title="Archive of the news in January 2009">January 2009</a> </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Open in new window

0
 
jpmonnAuthor Commented:
Since there's been only one response, I've raised the points on the question.

And yes, I agree that somehow I have the CSS setup incorrectly.

The <UL>'s and <LI>'s are generated by the <asp:menu> when the page is compiled. The actual source snippet can be seen below. It's also under the Style.css snippet in the same frame above.
Master.master
...
<div class="body">
            <div class="leftcolumn">
                <div class="navigate">
                    <div class="boxheader">
                        <div class="boxend">
                        </div>
                        <div class="boxtitle">
                            Navigation
                        </div>
                        <div class="boxcorner">
                        </div>
                    </div>
                    <div class="box">
                        <asp:Menu ID="Menu" DataSourceID="SiteMapDataSource" runat="server" 
                            StaticDisplayLevels="1" DynamicHorizontalOffset="-100">
                        </asp:Menu>
                    </div>
                </div>
                <div class="columnspacer">
                </div>
...

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
jpmonnAuthor Commented:
Sorry, I am late on responding, I was on vacation yesterday.

I did as you suggested and assigned "AspNet-Menu" to those styles.

I was digging in the ZIP that the CSS Friendly Adpaters came in and I found some CSS Styles that that the README gave as defaults. Just scroll down to the Style.css snippet to see what I added to that file.

But, it seems that the poroblem remains. The dynamic part of the menu is still popping up outside of menu's box. Do you have any other ideas?
Master.master
...
<div class="leftcolumn">
                <div class="navigate">
                    <div class="boxheader">
                        <div class="boxend">
                        </div>
                        <div class="boxtitle">
                            Navigation
                        </div>
                        <div class="boxcorner">
                        </div>
                    </div>
                    <div class="box">
                        <asp:Menu ID="Menu" DataSourceID="SiteMapDataSource" runat="server" 
                            StaticDisplayLevels="1" DynamicHorizontalOffset="10">
                            <StaticMenuItemStyle CssClass="AspNet-Menu" />
                            <DynamicHoverStyle CssClass="AspNet-Menu" />
                        </asp:Menu>
                    </div>
                </div>
...
 
Style.css

Open in new window

0
 
jpmonnAuthor Commented:
Sorry, but for some reason I didn't paste in the code for the Style.css. here it is.
Style.css
...
/* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */
/* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */ 
/* See WhitePaper.aspx for details. */
 
ul.AspNet-Menu 
{
    position: relative;
}
 
 
ul.AspNet-Menu, 
ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;
 
}
 
ul.AspNet-Menu li
{
    position: relative;
    list-style: none;
    float: left;
}
 
ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}
 
ul.AspNet-Menu ul
{
    position: absolute;
    visibility: hidden;    
}
 
/* Add more rules here if your menus have more than three (3) tiers*/ 
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: hidden;
}
 
/* Add more rules here if your menus have more than three (3) tiers*/ 
ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible;
}
 
.AspNet-Menu-Vertical ul.AspNet-Menu li
{
    width: 100%;
}

Open in new window

0
 
jpmonnAuthor Commented:
I have found a method to get my menu working, if by accepting less desirable solution.

By removing the CSS Friendly Adpaters for the Menu control and using the standard ASP.Net menu, the menu behaves properly.

But, i would prefer to use the CSS Friendly adpaters, so I will leave the question open and hope for some suggestions.
0
All Courses

From novice to tech pro — start learning today.