CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 6050

Simple CSS Menu issues

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: Chrome Top IE9 Bottom

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>

Upvotes: 0

Views: 424

Answers (3)

mowwwalker
mowwwalker

Reputation: 17392

Chrome and Firefox are fixing whatever syntactical error you made and generating:

<div class="page">
                <ul class="memu js-enabled">
                    <li class="memu-root">
                        <a href="#">Accounts</a>
                        <ul>
                            <li class="has-children">
                                </li><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>                        

                            </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>

Upvotes: 1

Jitender
Jitender

Reputation: 7969

replace

<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>

to this

<li class="has-children">
<ul>
<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>                        
</ul>
                            </li>

Upvotes: 1

Mike
Mike

Reputation: 6050

I may have solved it in the css is the line 

.memu li {
float: left;
}

so I added a 

.main {
 clear: left;
 }

And that works for everything except IE9. Not sure if that is the best way to handle this issue. Please continue to comment if this is incorrect.

Upvotes: 0

Related Questions