I am using a menu system from this website
CSS/Jquery Menu
In chrome the menu displays fine, but my main content(one textbox) is on the same line as the menu.
In IE 9 the Menu does not even display correctly. The first element is rendered properly but the other two (and the sub menu) are displayed as normal hyperlinks
Note in compatability mode, it sort of displays correctly, the shadow on the sub menu is missing but the elements are in the correct order and the textbox is still on the same line
Is anyone willing to look at my Code and help me understand what I am doing incorrectly. I consider my self versed in Html but not CSS where I believe the issue is.
Master Page:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="BudgetApplicationWeb.Site" %>
<!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></title>
<link href="Styles/memu-0.1.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
pre { font-size: 0.6em; }
.sprite-font_add { width: 16px; height: 16px; background:url(../famfamfam/css-sprite.png) no-repeat -0px -7216px; }
.sprite-page_white { width: 16px; height: 16px; background:url(../famfamfam/css-sprite.png) no-repeat -0px -10048px; }
</style>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<ul class="memu js-enabled">
<li class="memu-root">
<a href="#">Accounts</a>
<ul>
<li class="has-children">
<li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
<li><a href="New.aspx"><div class="memu-icon sprite-font_add"></div>New</a></li>
</li>
</ul>
</li>
<li class="memu-root">
<a href="#">Budget</a>
</li>
<li class="memu-root">
<a href="#">Settings</a>
<ul>
<li><a href="#">Add Category</a></li>
</ul>
</li>
</ul>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="clear">
</div>
<div class="footer">
</div>
</div>
</form>
</body>
</html>
Menu.css
.memu {
list-style: none outside none;
margin: 0;
padding: 0;
}
.memu ul {
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
left: -9999px;
margin-left: 20px;
width: 150px;
-moz-box-shadow: 3px 2px 3px #333;
-webkit-box-shadow: 3px 2px 3px #333;
box-shadow: 3px 2px 3px #333;
}
.memu ul ul {
margin-left: 0px;
margin-top: 0px;
}
.memu a {
background: #fff;
background-color: rgba(255, 255, 255, 0.98);
border: 1px solid #f7f7f7;
color: #333;
display: block;
font: bold 12px/25px segoe ui,verdana,sans-serif;
margin: 0 -1px -1px 0;
padding-left: 10px;
text-decoration: none;
width: 139px;
text-overflow: ellipsis;
}
.memu .memu-icon {
position: relative;
width: 16px;
height: 16px;
margin: 4px 10px 0px 0px;
float: left;
}
.memu li.memu-root > a {
border-left: 0 !important;
border-right: 0 !important;
border-top: 1px solid transparent !important;
border-bottom: 1px solid transparent !important;
background: transparent !important;
}
.memu li {
float: left;
}
.memu li.has-children > a {
background: url("arrow.png") no-repeat scroll #fff;
background-position: 130px center;
background-color: rgba(255, 255, 255, 0.98);
}
.memu li:hover {
position: relative;
z-index: 100;
}
.memu li:hover > a {
background-color: #fff;
border-color: #fafafa;
color: #56789A;
}
.memu li:hover > ul {
left: -20px;
opacity: 1;
top: 26px;
z-index: -1;
}
.memu li:hover li:hover > ul {
left: 150px;
opacity: 1;
top: 0px;
z-index: 100;
}
.memu-current {
background-color: rgba(0, 0, 0, 0.98 !important) !important;
}
New.aspx (with the textbox)
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="New.aspx.vb" Inherits="BudgetApplicationWeb._New" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div>
<asp:TextBox runat="server" ID="t1"></asp:TextBox>
</div>
</asp:Content>
Picture:
HTML render as asked for:
<!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><title>
</title><link href="../Styles/memu-0.1.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
pre { font-size: 0.6em; }
.sprite-font_add { width: 16px; height: 16px; background:url(../famfamfam/css-sprite.png) no-repeat -0px -7216px; }
.sprite-page_white { width: 16px; height: 16px; background:url(../famfamfam/css-sprite.png) no-repeat -0px -10048px; }
</style>
</head>
<body>
<form method="post" action="New.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjI0NjY1NDA2ZGTedvbVstQSjEJlNsWGzH7rlBfvau1o6GnEDrB7goLkfg==" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKfvIywCgKp3sDPDCUOCLNtdSKEDWUr5o+bR23FLTplesWTeKeRUvhXZp/Y" />
</div>
<div class="page">
<ul class="memu js-enabled">
<li class="memu-root">
<a href="#">Accounts</a>
<ul>
<li class="has-children">
<li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
<li><a href="New.aspx"><div class="memu-icon sprite-font_add"></div>New</a></li>
</li>
</ul>
</li>
<li class="memu-root">
<a href="#">Budget</a>
</li>
<li class="memu-root">
<a href="#">Settings</a>
<ul>
<li><a href="#">Add Category</a></li>
</ul>
</li>
</ul>
</div>
<div class="main">
<div>
<input name="ctl00$MainContent$t1" type="text" id="MainContent_t1" />
</div>
</div>
<div class="clear">
</div>
<div class="footer">
</div>
</form>
</body>
</html>
replace
to this