jQuery UI button Styling - Overflow?

**a-elnajjar** · Aug 24, 2012 08:33

Hi I have problem with Jquery Button UI ".navControl" it is overly on the nav drop menu ".menu"
phto1.jpg phto1.jpg phto1.jpg phto1.jpg

Code:

/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
	background-color:#3a4f63;
	width:100%;
}

div.menu
{
	padding: 4px 0px 4px 8px;
	z-index:10;
}

div.menu ul
{
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
	background-color: #465c71;
	border: 1px #4e667d solid;
	color: #dde4ec;
	display: block;
	line-height: 1.35em;
	padding: 4px 20px;
	text-decoration: none;
	white-space: nowrap;


div.menu ul li a:hover
{
	background-color: #bfcbd6;
	color: #465c71;
	text-decoration: none;
}

div.menu ul li a:active
{
	background-color: #465c71;
	color: #cfdbe6;
	text-decoration: none;
}
/* #navControl
----------------------------------------------------------*/
.navControl
{
	list-style-type:none;
	margin:0;
	padding:0;
	color:Teal;
	z-index:-1;
	
}

.navControl li
{
	display:inline;
	padding: 5px 5px;
	
}

.navControl li a 
{
	text-decoration:none;
}

**Paul O'B** · Aug 24, 2012 09:50

Hi,

Without html I can't tell you which is the appropriate element to add the z-index but you should do this:

If the menu and the buttons are siblings then simply add position:relative to the menu container and then add a high z-index. Next add position:relative to the button container and set a lower z-index than the menu.

If the elements aren't siblings then use the same approach on the parents of those elements that are siblings.

Note that only positioned elements can have z-index applied so if the element is static then you need to add position:relative as well.

**a-elnajjar** · Aug 24, 2012 11:14

this my html mark up

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>Compudata Project Manager</title>
    <link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="Scripts/fancybox/jquery.fancybox.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="Scripts/fancybox/helpers/jquery.fancybox-buttons.css" />
    <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>
    <script type="text/javascript" src="Scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="Scripts/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="Scripts/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="Scripts/script.js"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
           &nbsp;<div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a>
                        ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold">
                            <asp:LoginName ID="HeadLoginName" runat="server" />
                        </span>! [
                        <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
                            LogoutPageUrl="~/" />
                        ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
                        <asp:MenuItem NavigateUrl="~/SearchTasks.aspx" Text="Search Task" 
                            Value="Search Task"></asp:MenuItem>
                        <asp:MenuItem Text="Administrator" Value="Administrator">
                            <asp:MenuItem NavigateUrl="~/Admin/ManageProjects.aspx" Text="Manage Projects" 
                                Value="Manage Projects"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/TasksListAdmin.aspx" Text="Tasks List Admin" 
                                Value="Tasks List Admin"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/PriorityAdmin.aspx" Text="Priority Admin" 
                                Value="Priority Admin"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/StatusAdmin.aspx" Text="Status Admin" 
                                Value="Status Admin"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/BillableTypeAdmin.aspx" 
                                Text="BillableType Admin" Value="BillableType Admin"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Admin/RolesAdmin/ManageRoles.aspx" Text="New Item" 
                                Value="New Item"></asp:MenuItem>
                        </asp:MenuItem>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <div>
                <ul class="navControl">
                    <li><a href="TasksForm.aspx">+ Create New Task</a></li>
                    <li><a href="ProjectForm.aspx">+ Create New Project</a></li>
                    <li><a href="TimeSheetForm.aspx">+ Enter Timesheet</a></li>
                </ul>
            </div>
            <div id="sideNav">
   
            
         <uc1:uc_quickNav_Projects ID="uc_quickNav_Projects1" runat="server" />
            </div>
            <br />

            <div id="mainContent">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div >
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
    </div>
    </form>
</body>
</html>

**Paul O'B** · Aug 24, 2012 11:45

I'd need a link to the page to debug properly but if the menu is inside #header and the buttons inside #main then the following will work:

Code:

#header{position:relative:z-index:2}
#main{position:relative:z-index:1}

However if your buttons are placed by some other means using jquery then we'd need to see the generated view source of the document.

User Tag List

Thread: jQuery UI button Styling - Overflow?

Thread Tools

Display

Hybrid View

jQuery UI button Styling - Overflow?

Bookmarks

Bookmarks

Posting Permissions