Link to home
Start Free TrialLog in
Avatar of K Feening
K FeeningFlag for Australia

asked on

VB.net Menu

Hi I created a menu to run on cloud and from the visual studios 2019 VB.Net the menu look ok in Design mode but when running program its different and wraps around
What other informat do you require
I dont change any properties or Attributes when running program
Design Mode
User generated image
Web
User generated image



Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

It looks like your CSS has some issue here.

can you share the related working source code for further review here?
Perhaps share the URL if you allow sharing the link to public access.is better. 
Avatar of K Feening

ASKER

This is in development cannot share URL not Published (Haven't learn't how yet) I am just running from VS2019
Menu..aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SchoolMenu.aspx.vb" Inherits="School.Menu" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>School Menu</title>
    <link rel="shortcut icon" type="image/x-icon" href="~/images/favicon.ico" />
    <style>
        .btemplate {
            background-image: url('/images/Template.png');
            background-repeat: no-repeat;
            background-position: 0% 50%; /*Position Png*/
            padding: 20px 30px;
            margin: 4px 2px;
            font-size: medium;
            padding-left: 40px !important; /*Move Text From left of button*/
            line-height: 2px;
            border: 1px solid #2d6898;
            border-radius: 7px;
            background-color: #CCCCCC;
        }
        .bclose {
            background-image: url('/images/Close.png');
            background-repeat: no-repeat;
            background-position: -5% 50%;
            padding: 20px 30px;
            margin: 4px 2px;
            font-size: medium;
            line-height: 2px;
            border: 1px solid #2d6898;
            border-radius: 7px;
            background-color: #CCCCCC;
        }
        .dropdown {
            background-image: url('/images/DropDown.png');
            background-repeat: no-repeat;
            background-position: 100% 50%;
            background-size: 20px !important;
        }
        #form1 {
            z-index: 1;
            left: 10px;
            top: 15px;
            position: absolute;
            height: 33px;
            width: 544px;
        }
        .rowstyle {
            line-height: 10px !important;
        }        
       </style>
   <link href="css/StyleMenu.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">        
        <ul id="menu">
            <li><a href="#">Maintenance</a>
                <ul>
                    <li class="dropdown"><a href="#">Control</a>
                        <ul>
                             <!--<li><a href="AdjustmentMaint.aspx">Adjustment Control</a></li>-->
                        </ul>
                    </li>
                    <li><a href="DeleteInsert.aspx">Delete Warnining Message</a></li>
                    <li><a href="TimeTableChange.aspx">Time Table Change</a></li>
                </ul>
            </li>
            <li><a href="NoteMaintenance.aspx">Notes</a></li>
            <li><a href="#">Lessons</a>
                <ul>
                    <li class="dropdown"><a href="#">Initial Setup</a>
                        <ul>
                            <li><a href="LessonCodeAdd.aspx">Lesson Creation</a></li>
                            <li class="dropdown"><a href="#">Lesson Report Headings</a>
                                <ul>
                                     <li><a href="LessonHeadings.aspx">Headings</a></li>
                                    <li><a href="Symbols.aspx">Symbols</a></li>
                                </ul>
                            </li>
                            <li><a href="ClassRequirements.aspx">Lessons Requirements</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Program Edits</a>
                        <ul>
                            <li><a href="LessonRenameCode.aspx">Rename Lesson Code</a></li>
                            <li><a href="LessonRenameMove.aspx">Rename Move</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Share</a>
                        <ul>
                            <li><a href="LessonShare.aspx">Lesson Share</a></li>
                            <li><a href="LessonShareSchedular.aspx">Lesson Schedular</a></li>
                            <li><a href="LessonShareDelete.aspx">Delete Share(s)</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Import / Export Lessons</a>
                        <ul>                            
                            <li><a href="ExportClasses.aspx">Export XL Lesson(s)</a></li>
                            <li><a href="ImportClasses.aspx">Import XL / Word Lesson(s)</a></li>
                        </ul>
                    </li>
                    <li><a href="AdjustmentEntry.aspx">Adjustment Entry</a></li>
                    <li class="dropdown"><a href="#">Lesson Generate / Move</a>
                        <ul>
                            <li><a href="LessonGenerate.aspx">Generate / Append Lessons</a></li>
                            <li><a href="LessonMoveDay.aspx">Move Whole Day</a></li>
                            <li><a href="LessonDeleteMove.aspx">Delete Move Lessons</a></li>
                        </ul>
                    </li>
                    <li><a href="LessonMaintenance.aspx">Lesson Maintenance</a></li>
                </ul>
            </li>
            <li><a href="#">Student(s)</a>
                <ul>
                        <ul>
                            <li><a href="#">Control</a></li>
                            <li><a href="#">Maintenance</a></li>
                        </ul>
                    </li>-->
                    <li><a href="#">Random Selector</a></li>
                    <li class="dropdown"><a href="#">Student Entry</a>
                        <ul>
                            <li><a href="Import.aspx">Import Student Names</a></li>
                            <li><a href="CodeMaint.aspx">Code Maintenance</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Student Grading</a>
                        <ul>
                            <li><a href="Grading.aspx">Maintenance</a></li>
                            <li><a href="GradeEntry.aspx">Pupil Entry</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Reports</a>
                <ul>
                    <li><a href="Reporting/AdjustmentDefinition.aspx" target="_blank">Adjustment Report</a></li>
                    <li><a href="Reporting/CalendarDefinition.aspx" target="_blank">Calendar Lesson Report</a></li>
                    <li><a href="Reporting/SchoolSelectorDefinition.aspx" target="_blank">Selection Report</a></li>
                    <li><a href="Reporting/StudentNoteDefinition.aspx" target="_blank">Student Notes</a></li>
                    <li><a href="Reporting/SymbolDefinition.aspx" target="_blank">Symbols</a></li>
                    <li class="dropdown"><a href="#">Deleted Passwords</a>
                        <ul>
                            <li><a href="#" target="_blank">Course Report</a></li>
                            <li><a href="#" target="_blank">Student Notes</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Year Maintenance</a>
                <ul>
                    <li><a href="YearEnd.aspx">Update Year</a></li>
                    <li><a href="Template.aspx">Timetable Template</a></li>
                </ul>
            </li>
            <li><a href="..\Menu\CMenu.aspx" target="_blank">Career Menu</a>
                </li>
        </ul>

Open in new window

 StyleMenu.css
body {
     *background: #c1c1c1; 
     font-size: 14px;
     width: 544px;
}
 
#menu, #menu ul { 
     margin: 0;
     padding: 0;
     list-style: none;
}
 
#menu {
     position: absolute;
     width: 678px;
     margin: 0px auto;
     background-color: #666666;
     border-radius: 6px;
     top: 15px;
     left: 10px;
}
 
     #menu:before,
     #menu:after {
        content: '';
        display: table;
     }
 
     #menu:after {
        clear: both
     }
 
     #menu li {
        float: left;
        position: relative;
        top: 0px;
        left: 0px;
        height: 40px;
     }
 
     #menu a {
        float: left;
        padding: 12px 10px; 
        font-family: Arial;
        text-decoration: none;
        color: #fff; 
     }
 
     #menu li:hover > a {
        background-size: 140px;
        color: Yellow;
     }
 
     #menu ul {
        margin: 20px 0 0 0;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top:40px; 
        left: 0;
        z-index: 1;
        background: #262626;
        border-radius: 4px;
        list-style-type: none;
     }
 
     #menu li:hover > ul {
        opacity: 1;
        visibility: visible;       
        margin: 0;
     }
 
     #menu ul ul {
        top: 5px; 
        left: 183px; 
        margin: 0 0 0 20px;
     }
 
     #menu ul li {
        float: none;
        display: block;
        border: 0;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
     }
 
        #menu ul li:last-child {
            box-shadow: none
        }
 
     #menu ul a {
        padding: 10px; 
        width: 140px;
        display: block;
        white-space: nowrap;
        float: none;
     }
 
     #menu ul ul li {
        width: 186px; 
        background-color: #666666; 
     }
 
     #menu ul li {
        width: 186px; 
        background-color: #666666;
     }
 
     #menu li {
        float: left;
        position: relative;
        top: -5px;
        left: 0px; 
        height: 30px;      
    }

Open in new window

The menu is shown properly based on the given HTML source code. You can see the screenshot below:
User generated imageHere is the test file:
testmenu.html

Can you screenshot your version when you run the aspx file locally? 
It was in the first Question, this is what is shows following is the full code (I removed code that wasn't relevent to the menu
Below is the screen shot
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SchoolMenu.aspx.vb" Inherits="School.Menu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>School Menu</title>
    <link rel="shortcut icon" type="image/x-icon" href="~/images/favicon.ico" />
    <style>
        .btemplate {
            background-image: url('/images/Template.png');
            background-repeat: no-repeat;
            background-position: 0% 50%; /*Position Png*/
            padding: 20px 30px;
            margin: 4px 2px;
            font-size: medium;
            padding-left: 40px !important; /*Move Text From left of button*/
            line-height: 2px;
            border: 1px solid #2d6898;
            border-radius: 7px;
            background-color: #CCCCCC;
        }

        .bclose {
            background-image: url('/images/Close.png');
            background-repeat: no-repeat;
            background-position: -5% 50%;
            padding: 20px 30px;
            margin: 4px 2px;
            font-size: medium;
            line-height: 2px;
            border: 1px solid #2d6898;
            border-radius: 7px;
            background-color: #CCCCCC;
        }

        .dropdown {
            background-image: url('/images/DropDown.png');
            background-repeat: no-repeat;
            background-position: 100% 50%;
            background-size: 20px !important;
        }

        #form1 {
            z-index: 1;
            left: 10px;
            top: 15px;
            position: absolute;
            height: 33px;
            width: 544px;
        }

        .rowstyle {
            line-height: 10px !important;
        }
       
       </style>
   <link href="css/StyleMenu.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="gvDesc" runat="server" AllowPaging="True" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Id" DataSourceID="dsNotes" ForeColor="#333333" GridLines="None" PageSize="4" ShowHeaderWhenEmpty="True" Style="overflow: scroll; z-index: -4; left: 407px; top: 88px; position: absolute; width: 372px" AutoPostBack="True" OnSelectedIndexChanged="gvDesc_SelectedIndexChanged">
            <rowstyle VerticalAlign="Top" />
            <EmptyDataTemplate>
                <div align="center">No records found.</div>
            </EmptyDataTemplate>
            <Columns>
                <asp:CommandField ShowSelectButton="true" ShowEditButton="false" ShowCancelButton="false" ShowDeleteButton="false" ButtonType="Button"></asp:CommandField>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" Visible="False" />
                <asp:BoundField DataField="Note" HeaderText="Note" SortExpression="Note" ItemStyle-CssClass="gvfix200">
                    <ItemStyle CssClass="gvfix200" VerticalAlign="Middle"></ItemStyle>
                <HeaderStyle HorizontalAlign="Left" Wrap="True"/>                  

                </asp:BoundField>
                <asp:BoundField DataField="RemDays" HeaderText="Days" SortExpression="RemDays">
                    <HeaderStyle HorizontalAlign="Center" />
                    <ItemStyle HorizontalAlign="Center" />
                </asp:BoundField>
                <asp:BoundField DataField="RemDate" DataFormatString="{0:dd/MM/yyyy} " HeaderText="Date" SortExpression="RemDate">
                    <HeaderStyle HorizontalAlign="center" />
                </asp:BoundField>
            </Columns>
            <EditRowStyle BackColor="#7C6F57" />
            <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
            <HeaderStyle CssClass="rowstyle" BackColor="#1C5E55" Font-Bold="True" ForeColor="White" Height="20px" />
            <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#E3EAEB" CssClass="RowStyle" />
            <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F8FAFA" />
            <SortedAscendingHeaderStyle BackColor="#246B61" />
            <SortedDescendingCellStyle BackColor="#D4DFE1" />
            <SortedDescendingHeaderStyle BackColor="#15524A" />
        </asp:GridView>
        <ul id="menu">
            <li><a href="#">Maintenance</a>
                <ul>
                    <li class="dropdown"><a href="#">Control</a>
                        <ul>
                            <!--<li><a href="AdjustmentMaint.aspx">Adjustment Control</a></li>-->
                            <li><a href="SchoolInfo.aspx">Control File</a></li>
                            <li><a href="Holidays.aspx">Holidays</a></li>
                            <li><a href="RoomCode.aspx">Rooms</a></li>
                            <li><a href="YearCode.aspx">Year Code</a></li>
                            <li><a href="ImagePath.aspx">Image Path / Adjustments</a></li>
                            <!--<li><a href="PasswordEncrypt.aspx">Password Encrypt</a></li>-->
                 
                        </ul>
                    </li>
                    <!-- Create manual menu and use onserverclick event -->
                    <!--<li><a href="#" id="BackupFile" runat="server">Backup Files</a></li>
                    <li><a href="#">Restore Files</a></li>-->
                    <li><a href="DeleteInsert.aspx">Delete Warnining Message</a></li>
                    <!--<li><a href="#">Reorder Roster Template</a></li>-->
                    <li><a href="TimeTableChange.aspx">Time Table Change</a></li>
                    <li><a href="UserForm.aspx">Username Maintenance</a></li>
                    <li><a href="UserReplace.aspx">Username Replacements</a></li>
                    <li><a href="PasswordChange.aspx">Password Change</a></li>
                </ul>
            </li>
            <li><a href="NoteMaintenance.aspx">Notes</a></li>
            <!--<li><a href="Calendar.aspx" style="z-index: 1">Calendar</a></li>-->
            <li><a href="#">Lessons</a>
                <ul>
                    <li class="dropdown"><a href="#">Initial Setup</a>
                        <ul>
                            <li><a href="LessonCodeAdd.aspx">Lesson Creation</a></li>
                            <li class="dropdown"><a href="#">Lesson Report Headings</a>
                                <ul>
                                    <li><a href="LessonHeadings.aspx">Headings</a></li>
                                    <li><a href="Symbols.aspx">Symbols</a></li>
                                </ul>
                            </li>
                            <li><a href="ClassRequirements.aspx">Lessons Requirements</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Program Edits</a>
                        <ul>
                            <li><a href="ImportIcsCalendar.aspx">Import ICS Calendar</a></li>
                            <li><a href="LessonRemove.aspx">Remove Created Lesson(s)</a></li>
                            <li><a href="LessonRename.aspx">Rename Lesson(s)</a></li>
                            <li><a href="LessonRenameCode.aspx">Rename Lesson Code</a></li>
                            <li><a href="LessonRenameMove.aspx">Rename Move</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Share</a>
                        <ul>
                            <li><a href="LessonShare.aspx">Lesson Share</a></li>
                            <li><a href="LessonShareSchedular.aspx">Lesson Schedular</a></li>
                            <li><a href="LessonShareDelete.aspx">Delete Share(s)</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Import / Export Lessons</a>
                        <ul>                            
                            <li><a href="ExportClasses.aspx">Export XL Lesson(s)</a></li>
                            <li><a href="ImportClasses.aspx">Import XL / Word Lesson(s)</a></li>
                        </ul>
                    </li>
                    <li><a href="AdjustmentEntry.aspx">Adjustment Entry</a></li>
                    <li class="dropdown"><a href="#">Lesson Generate / Move</a>
                        <ul>
                            <li><a href="LessonGenerate.aspx">Generate / Append Lessons</a></li>
                            <li><a href="LessonMoveDay.aspx">Move Whole Day</a></li>
                            <li><a href="LessonDeleteMove.aspx">Delete Move Lessons</a></li>
                            <!--<li><a href="LessonCode.aspx">Swap Move Lessons</a></li>-->
                        </ul>
                    </li>
                    <li><a href="LessonMaintenance.aspx">Lesson Maintenance</a></li>
                </ul>
            </li>
            <li><a href="#">Student(s)</a>
                <ul>
                     <!--<li class="dropdown"><a href="#">Profile</a>
                        <ul>
                            <li><a href="#">Control</a></li>
                            <li><a href="#">Maintenance</a></li>
                        </ul>
                    </li>-->
                    <li><a href="#">Random Selector</a></li>
                    <li class="dropdown"><a href="#">Student Entry</a>
                        <ul>
                            <li><a href="ImportStudents.aspx">Import Student Names</a></li>
                            <li><a href="StudentCodeMaint.aspx">Code Maintenance</a></li>
                            <li><a href="StudentClassNotes.aspx">Class Notes</a></li>
                            <li><a href="StudentLessonNotes.aspx">Lesson Notes</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#">Student Grading</a>
                        <ul>
                            <li><a href="SchoolGrading.aspx">Maintenance</a></li>
                            <li><a href="SchoolGradeEntry.aspx">Pupil Entry</a></li>
                            <!--<li><a href="GradeImport.aspx">Pupil Import</a></li>-->
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Reports</a>
                <ul>
                    <li><a href="Reporting/AdjustmentDefinition.aspx" target="_blank">Adjustment Report</a></li>
                    <li><a href="Reporting/CalendarDefinition.aspx" target="_blank">Calendar Lesson Report</a></li>
                    <li><a href="Reporting/CourseDefinition.aspx" target="_blank">Course Report</a></li>
                    <li><a href="Reporting/CourseDefinitionPrev.aspx" target="_blank">Course Report Previous</a></li>
                    <li><a href="Reporting/CourseDayDefinition.aspx" target="_blank">Course Day Report</a></li>
                    <li><a href="Reporting/CourseRankingDefinition.aspx" target="_blank">Course Ranking</a></li>
                    <li><a href="Reporting/CourseRankingPrevDefinition.aspx" target="_blank">Course Ranking Previous</a></li>
                    <li><a href="Reporting/GradingDefinition.aspx" target="_blank">Grading Report</a></li>
                    <li><a href="#">Profile Report</a></li>
                    <li><a href="Reporting/SchoolSelectorDefinition.aspx" target="_blank">Selection Report</a></li>
                    <li><a href="Reporting/StudentNoteDefinition.aspx" target="_blank">Student Notes</a></li>
                    <!--<li><a href="Reporting/MasterListDefinition.aspx" target="_blank">Master List</a></li>-->
                    <li><a href="Reporting/SymbolDefinition.aspx" target="_blank">Symbols</a></li>
                    <li class="dropdown"><a href="#">Deleted Passwords</a>
                        <ul>
                            <li><a href="#" target="_blank">Course Report</a></li>
                            <li><a href="#" target="_blank">Student Notes</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Year Maintenance</a>
                <ul>
                    <li><a href="YearEnd.aspx">Update Year</a></li>
                    <li><a href="RosterTemplate.aspx">Timetable Template</a></li>
                    <li><a href="Roster.aspx">Timetable Build</a></li>
                    <li><a href="LessonCreation.aspx">Lesson Creation</a></li>
                    <li><a href="YearRoster.aspx">Lesson Build</a></li>
                    <li><a href="#">FTP Load Holidays</a></li>
                </ul>
            </li>
            <li><a href="..\Career\CareerMenu.aspx" target="_blank">Career Menu</a>
                </li>
        </ul>

        <asp:Calendar ID="calDate" runat="server" Style="z-index: -1; left: 413px; top: 313px; position: absolute; height: 208px; width: 271px" BackColor="White" BorderColor="Black" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" NextPrevFormat="ShortMonth" SelectionChanged="calDate_SelectionChanged" MonthChange="calDate_MonthChange" BorderStyle="Solid" CellSpacing="1" NextMonthText="" PrevMonthText="">
            <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
            <DayStyle BackColor="#CCCCCC" />
            <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <SelectedDayStyle BackColor="#333399" ForeColor="White" />
            <TitleStyle BackColor="#333399" Font-Bold="True" Font-Size="12pt" ForeColor="White" BorderStyle="Solid" Height="12pt" />
            <TodayDayStyle BackColor="#999999" ForeColor="White" />
        </asp:Calendar>
        <asp:TextBox ID="tbPw" runat="server" Style="z-index: 1; left: 415px; top: -33px; position: absolute" Visible="False"></asp:TextBox>


        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/Previous.png" Style="z-index: 0; left: 408px; top: 268px; position: absolute; width: 46px; height: 44px; right: 98px;" ToolTip="Previous Date" />
        <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/Next.png" Style="z-index: 0; left: 639px; top: 269px; position: absolute; height: 44px; width: 46px" ToolTip="Next Date" />
        <asp:Button ID="bSwap" runat="server" class="btemplate" Style="z-index: 1; left: 407px; top: 526px; position: absolute; height: 38px; width: 145px" Text="Swap/Move" />

        <asp:Button ID="bClose" runat="server" class="bclose" Style="z-index: 1; left: 601px; top: 526px; position: absolute; height: 40px; width: 82px" Text="Close" Click="bClose_Click" />
        <!--<img src="images/School1.jpg" alt="" style="width: 100%; height: 100%; z-index: -3;" />
        <!--<img src="images/School.jpeg" alt="" style="width:100%;  height:100% ;" />-->

        <asp:Label ID="lNote" runat="server" Font-Bold="True" Font-Size="12pt" Style="z-index: -3; left: 406px; top: 64px; position: absolute" Text="Notes"></asp:Label>

        <asp:SqlDataSource ID="dsNotes" runat="server" ConnectionString="<%$ ConnectionStrings:SchoolDataConnectionString %>" SelectCommand="SELECT [Note], [RemDays], [RemDate], [Id] FROM [SchoolNotes]"></asp:SqlDataSource>

        <asp:Panel ID="LessonPanel" runat="server" Style="z-index: 0; left: -2px; top: 74px; position: absolute; height: 518px; width: 323px">
            <asp:LinkButton ID="T1" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 28px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T2" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 72PX; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T3" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 116px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T4" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 160px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T5" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 204px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T6" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 248px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T7" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 292px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T8" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 336px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T9" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 380px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T10" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 424px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T11" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 468px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="T12" runat="server" Style="z-index: 1; width: 80px; height: 42px; left: 5px; top: 512px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Orange" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <!-- Second Button -->
            <asp:LinkButton ID="C1" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 28PX; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="C2" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 72PX; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="C3" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 116px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="C4" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 160px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:DropDownList ID="lbMonth" runat="server" style="z-index: 1; left: 498px; top: 211px; position: absolute" autopostback="true" OnSelectedIndexChanged="lbMonth_SelectedIndexChanged" BackColor="#0000CC" Font-Bold="True" ForeColor="White">
                <asp:ListItem Value="Select">Select Month</asp:ListItem>
                <asp:ListItem Value="January"></asp:ListItem>
                <asp:ListItem>February</asp:ListItem>
                <asp:ListItem>March</asp:ListItem>
                <asp:ListItem>April</asp:ListItem>
                <asp:ListItem>May</asp:ListItem>
                <asp:ListItem>June</asp:ListItem>
                <asp:ListItem>July</asp:ListItem>
                <asp:ListItem>August</asp:ListItem>
                <asp:ListItem>September</asp:ListItem>
                <asp:ListItem>October</asp:ListItem>
                <asp:ListItem>November</asp:ListItem>
                <asp:ListItem>December</asp:ListItem>
            </asp:DropDownList>
            <asp:LinkButton ID="C5" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 204px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="False"></asp:LinkButton>
            <asp:LinkButton ID="C6" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 248px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="False"></asp:LinkButton>
            <asp:LinkButton ID="C7" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 292px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="False"></asp:LinkButton>
            <asp:LinkButton ID="C8" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 336px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="False"></asp:LinkButton>
            <asp:LinkButton ID="C9" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 380px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="False"></asp:LinkButton>
            <asp:LinkButton ID="C10" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 424px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="False"></asp:LinkButton>
            <asp:LinkButton ID="C11" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 468px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="False"></asp:LinkButton>
            <asp:LinkButton ID="C12" runat="server" Style="z-index: 1; width: 100px; height: 42px; left: 86px; top: 512px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="LightSteelBlue" ForeColor="Black" Enabled="False"></asp:LinkButton>
            <!-- Third Button -->
            <asp:LinkButton ID="D1" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 28px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D2" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 72px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D3" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 116px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D4" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 160px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D5" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 204px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D6" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 248px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D7" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 292px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D8" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 336px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D9" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 380px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D10" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 424px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D11" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 468px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <asp:LinkButton ID="D12" runat="server" Style="z-index: 1; width: 103px; height: 42px; left: 187px; top: 512px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="White" ForeColor="Black" Enabled="true" OnClick="bLesson_Click"></asp:LinkButton>
            <!-- Fourth Button -->
            <asp:LinkButton ID="E1" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 28PX; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Enabled="false" Visible="False"></asp:LinkButton>
            <asp:LinkButton ID="E2" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 72PX; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E3" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 116px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E4" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 160px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E5" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 203px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E6" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 248px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E7" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 292px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E8" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 336px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E9" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 380px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E10" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 424px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E11" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 468px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <asp:LinkButton ID="E12" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 292px; top: 512px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="YellowGreen" ForeColor="Black" Enabled="false"></asp:LinkButton>
            <!-- Fifth Button -->
            <asp:LinkButton ID="K1" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 28PX; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K2" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 72PX; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K3" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 116px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K4" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 160px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K5" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 204px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K6" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 248px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K7" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 292px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K8" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 336px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K9" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 380px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K10" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 424px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K11" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 392px; top: 468px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>
            <asp:LinkButton ID="K12" runat="server" Style="z-index: 1; width: 90px; height: 42px; left: 393px; top: 488px; position: absolute; borderstyle=none; text-decoration: none !important; text-align: center;" Font-Size="10pt" BackColor="Maroon" ForeColor="Black" Visible="false"></asp:LinkButton>

            <asp:Label ID="Label3" runat="server" BackColor="White" Font-Bold="True" Style="z-index: -1; left: 187px; top: 11px; position: absolute; width: 111px; height: 17px;" Text="Click for lessons" ForeColor="Black"></asp:Label>
            <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="16pt" Style="z-index: 1; left: 3px; top: -16px; position: absolute" Text="Label"></asp:Label>
            <asp:Label ID="Label9" runat="server" style="z-index: 1; left: 689px; top: 414px; position: absolute; width: 98px; bottom: 88px; text-align: center" Text="(*S*) Shared"></asp:Label>
        </asp:Panel>

        <p>
            &nbsp;
        </p>

        <asp:Label ID="Label4" runat="server" BackColor="DarkGoldenrod" Font-Bold="True" ForeColor="White" Style="z-index: 0; left: 687px; top: 383px; position: absolute; text-align: center" Text="Completed" Width="98px"></asp:Label>
        <asp:Label ID="Label5" runat="server" BackColor="#CCCCCC" Font-Bold="True" ForeColor="Black" Style="z-index: -5; left: 687px; top: 366px; position: absolute; width: 98px; text-align: center" Text="Incomplete"></asp:Label>
        <asp:Label ID="Label6" runat="server" BackColor="Blue" Font-Bold="True" ForeColor="White" Style="z-index: 0; left: 687px; top: 444px; position: absolute; text-align: center; width: 98px;" Text="Selected Day"></asp:Label>
        <asp:Label ID="Label7" runat="server" BackColor="Green" Font-Bold="True" ForeColor="White" Style="z-index: -5; left: 687px; top: 427px; position: absolute; width: 98px; text-align: center" Text="No Lessons"></asp:Label>

        <asp:Label ID="Label8" runat="server" style="z-index: 1; left: 692px; top: 346px; position: absolute; width: 100px" Text="Lesson Legend"></asp:Label>

    </form>
</body>
</html>

Open in new window

User generated image







Noted. Can you shared the rendered HTML source code for further inspection instead? 
Hi
Works correctly when put into the .aspx  and remove the <link href="css/StyleMenu.css" rel="stylesheet" />
why ?
ASKER CERTIFIED SOLUTION
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial