I am using Visual Studio Web Developer 2008, CSS 2.1
Browser Firefox 3.5.8, IE 6.0.2900
I created a master page following tutorials elsewhere and the problem mainly comes with the Menu bar, I created a custom menu bar to suit my needs, rather than using the inbuilt menu, but i am guessing because of the menu the webpage components are out of place in
1)Firefox: there is a Nav div on the left hand side of the page
Logo Title
Dotted Line
Menu
Dotted Line
Nav Main Content page
(25%) (margin-left:30%;)
footer
This is how i am trying to arrange the page but in firefox the Nav falls to the right, CSS setting justify:left dosent help.
2)In Internet Explorer
The menu appears vertical rather than horizontal
Please find the code to my Master Page below, however note that i am NOT trying to use the asp:menu item for a menu, and using a customized menu. Because of which my master page is all over the browser.
I would really appreciate if anyone can provide any sort of suggestions.
Please find Master Page below.
><%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" type="text/css" rel="Stylesheet" />
<script language="javascript" src="menu.js" type="text/javascript" ></script>
</head>
<body>
<div id="outer">
<div id="header">
<div id="lhead">
<img alt="logo1" src="Images/team1.jpg" style="height: 45px; width: 44px"/>
<a href="Default.aspx" style="color:Black; text-decoration:none" ><i><b>TEAM</b></i></a>
</div>
<div id="rhead">
<img alt="logo2" src="Images/team6.jpg" style="height: 46px; width: 50px" />
<img alt="logo3" src="Images/team3.jpg" />
<img alt="logo4" src="Images/team5.jpg" style="height: 44px; width: 54px" />
<img alt="logo5" src="Images/team4.jpg" style="height: 43px; width: 56px" />
</div>
<b id="team definition" style="color:Black; text-decoration:none; font-size:x-small;
font-weight:lighter; display:block; text-align:left;">REDEFINING EXCELLENCE</b>
<ul id="menu1">
<li><a href="#">home</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">products & services</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">engineering services</a>
<a href="#">engineering products</a>
<a href="#">it services</a>
</div>
</li>
<li>
<a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">about us</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">company history</a>
<a href="#">achievements & awards</a>
<a href="#">company policies</a>
<a href="#">future growth & vision</a>
</div>
</li>
<li>
<a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">careers</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">career path</a>
<a href="#">type of jobs</a>
<a href="#">current openings</a>
</div>
</li>
<li>
<a href="#"
onmouseover="mopen('m4')"
onmouseout="mlosetime()">help & support</a>
<div id='m4'
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">technical support</a>
<a href="#">feedback form</a>
</div>
</li>
<li>
<a href="#">contact us</a>
</li>
<li>
<a href="#">site map</a>
</li>
</ul>
</div>
<div id="body1">
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come; admit impediments; love is not love. Which alters when it alteration finds, or bends with the remover to remove. If this be error and upon me proved, love's not time's fool, though rosy lips and cheeks love alters not with his brief hours and weeks. Whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; but bears it out even to the edge of doom.</p>
<p>Which alters when it alteration finds, within his bending sickle's compass come; it is the star to every wand'ring bark. Whose worth's unknown, although his height be taken. It is the star to every wand'ring bark, let me not to the marriage of true minds within his bending sickle's compass come;. Oh, no, it is an ever fixed mark love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved.</p>
<p>That looks on tempests and is never shaken; or bends with the remover to remove. But bears it out even to the edge of doom. Within his bending sickle's compass come; love alters not with his brief hours and weeks, whose worth's unknown, although his height be taken. Let me not to the marriage of true minds.</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments; love is not love whose worth's unknown, although his height be taken. Which alters when it alteration finds, let me not to the marriage of true minds oh, no, it is an ever fixed mark. </p>
</div>
</div>
</div>
</body>
</html>Code for CSS file
body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-right:auto;
margin-left:auto;
margin-top:auto;
margin-bottom:auto;
}
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 10px;
height: 95px;
}
div#lhead {
font-size:x-large;
color:Black;
width:26%;
float:left;
margin-bottom:0px;
height: 48px;
}
div#rhead {
margin-left:30%;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
height:auto;
}
#menu1 li
{
list-style:none;
float: left;
padding:0px;
}
#menu1
{
border-style: dotted none dotted none;
border-width: thin;
border-color: #000000;
text-decoration: none;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}
#menu1 li a
{
border-style: none;
border-width: thin;
display: block;
padding: 0px 0px 5px 5px;
text-align: center;
text-decoration: none;
color: Black;
/*z-index:-1; to send the block behind the dotted line. 2nd obsderv doesnt work here.*/
}
#menu1 div
{
border-style: solid;
border-width: thin;
visibility: hidden;
}
#menu1 div a
{
display: block;
white-space:nowrap;
text-align:left;
padding:0 5 0 5px;
text-decoration:none;
color: #2875DE;
}
#menu1 li a:hover
{
background-color: white;
color: #3366FF;
}
#menu1 div a:hover
{
background: white;
text-decoration: underline;
}
#body1
{
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
height: auto;
background-color: #FFFFFF;
}
div#nav
{
width: 25%;
padding: 10px;
margin-top: 1px;
z-index: -1;
height: auto;
float:left;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 0px 0 0 0;
}
#footer
{
display:block;
padding: 5px;
margin: auto;
}Code for JavaScript
var timeout= 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime() /**the window property setTimeout is being passed(mclose(),500) guessing, so at the end of 500ms, the window hidden*/
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;Thanks