I am building an asp.net mvc application. I have my top menu structure which

Question

0

Asked: May 30, 20262026-05-30T15:07:56+00:00 2026-05-30T15:07:56+00:00

I am building an asp.net mvc application. I have my top menu structure which

0

I am building an asp.net mvc application. I have my top menu structure which is in my master page. It seems to render differently on either different screen sizes or different screen resolutions. This leaves the menu structure looking terrible. I want it to be the same at all times. Below is my master page html:

<body>
<div class="page">

    <div id="header">
        <div id="badge" style="float:left; width:20%;"><img src="../../Content/Images/School_Badge.jpg" alt="badge"/></div>

        <div id="title" style="width:80%;">
            <h1>School</h1>
            <h2>
            School Motto: Famba <br />
            English Meaning: Move Forward
            </h2>
        </div>

        <br/><br/><br/><br/>
        <div id="menucontainer">

            <ul id="menu">              
                <li><%: Html.ActionLink("About us", "Index", "Home")%></li>
                <li><%: Html.ActionLink("Admissions", "Admissions", "Home")%></li>
                <li><%: Html.ActionLink("Boarding", "Boarding", "Home")%></li>
                <li><%: Html.ActionLink("Academic", "Academic", "Home")%></li>
                <li><%: Html.ActionLink("Cultural", "Cultural", "Home")%></li>
                <li><%: Html.ActionLink("Sport", "Sport", "Home")%></li>
                <li><%: Html.ActionLink("Staff members", "Staff", "Home")%></li>
                <li><%: Html.ActionLink("Contact us", "ContactUs", "Home")%></li>
            </ul>

        </div>
    </div>

    <div id="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />

        <div id="footer">
        P.O Box 507 School| Phone: +23232 39 265064 | Fax: +232332 39 266043 |
        © Copyright Private School <%: DateTime.Now.Year %> <br /> <br />
        </div>
    </div>
</div>

and the css related to this is as follows:

.page
{
    width: 72%;
    margin-left: auto;
    margin-right: auto;
}

#header
{
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding-top: 20px;
}

#header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px !important;
}

#header h2
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px !important;
}

#main
{
    position:relative;
    padding: 30px 0px 15px 0px;
    background-color: #fff;
    margin-bottom: 30px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}

#menucontainer
{
    margin-top:100px;
}

div#title
{
    display:block;
    float:left;
    text-align:left;
}

ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align:center;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #151B54;
}

ul#menu li a:hover
{
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}                                                                                     

ul#menu li.selected a
{
     background-color: #fff;
     color: #000;
}

The first image shows the Correct display all the time, and the second one shows Incorrect display, what I am trying to avoid.

Correct display all the time