I have a navigation bar that is displayed correctly (all the way to the left) in firefox, but it is shifted to the right ~the width of the navigation bar, so there is a big white space where the nav bar should be, and then the nav bar is just covering the left part of my content box. Is there any way that I can fix this?
Master Page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="RedSideMenu.master.cs" Inherits="MasterPage" %>
<%@ Register TagPrefix="uc" TagName="Header" Src="~/Controls/Header.ascx" %>
<%@ Register TagPrefix="uc" TagName="Footer" Src="~/Controls/Footer.ascx" %>
<!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 runat="server">
<title>NFD Purchase Approval Tracking Tool</title>
<link href="<%= ResolveClientUrl("Styles/Site.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= ResolveClientUrl("Styles/leftMenu.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= ResolveClientUrl("Styles/jquerySmoothness.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= ResolveClientUrl("Scripts/jquery-1.4.1.js") %>" type="text/javascript" > </script>
<script src="<%= ResolveClientUrl("Scripts/Jquery.min.js") %>" type="text/javascript" > </script>
<script src="<%= ResolveClientUrl("Scripts/menu.js") %>" language="javascript" type="text/javascript" > </script>
<script src="<%= ResolveClientUrl("Scripts/jquery-ui-1.8.10.custom.min.js") %>" type="text/javascript" > </script>
</head>
<body>
<form id="Form1" runat="server">
<!-- Header Object - Pass values for width and titles, etc. -->
<uc:Header runat="server" ID="headerTest" />
<div id="pageDiv" class="page">
<!-- Left Navigation Bar -->
<div id="leftNavBar" class="leftNavBar">
<ul class="menu">
<li><a href="<%= ResolveClientUrl("Default.aspx") %>" >Home</a></li>
<li>
<a href="#">Resources</a>
<ul class="acitem">
<li><a href="<%= ResolveClientUrl("Default.aspx") %>">Searches</a></li>
<li><a href="<%= ResolveClientUrl("Default.aspx") %>">Dashboards</a></li>
</ul>
</li>
<li><a href="<%= ResolveClientUrl("Default.aspx") %>" >What's New?</a></li>
<li><a href="<%= ResolveClientUrl("Default.aspx") %>" >Training</a></li>
<li>
<a href="#" >Mailing List</a>
<ul class="acitem">
<li><a href="<%= ResolveClientUrl("admin/ViewMailingList.aspx") %>">View</a></li>
<li><a href="<%= ResolveClientUrl("admin/MailingListRegistration.aspx") %>">Registration</a></li>
</ul>
</li>
<li>
<a href="#" >System Admins</a>
<ul class="acitem">
<li><a href="<%= ResolveClientUrl("admin/maintainProfiles.aspx") %>">Maintain Profiles</a></li>
<li><a href="<%= ResolveClientUrl("admin/ViewProfiles.aspx") %>">View Profiles</a></li>
</ul>
</li>
</ul>
</div>
<!-- Main Content Holder -->
<div class="main">
<div class="PageHeader">
<asp:ContentPlaceHolder ID="MainContentHeader" runat="server"/>
</div>
<div class="PageContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</div>
<div class="clear">
</div>
</div>
<!-- Footer -->
<uc:Footer runat="server" ID="Footer" />
</form>
</body>
</html>
Site.CSS:
/* Defaults */
* { padding:0; margin:0; }
BODY
{
font-size: 13px;
color: #333;
margin:0px;
font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
}
P
{
font-size: 13px;
color: #333;
font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
}
DIV
{
font-size: 13px;
color: #333;
font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
}
a
{
color: #000;
text-decoration: none
}
a:link
{
color: #000;
text-decoration: none
}
a:hover
{
color: #ce1126;
text-decoration:: none
}
/* Left Nav Bar */
div.leftNavBar
{
border-right:#AC9F89 1px solid;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #CCC2B2;
width:128px;
height: 100%;;
position:absolute;
display:inline;
}
div.page
{
border: #CCC 1px solid;
width: 100%;
height: 100%;
}
div.PageHeader
{
width:95%;
text-align:left;
background:#880C1B;
border-left: #880C1B 1px solid;
border-right: #880C1B 1px solid;
color:#FFF;
/*background-image:url(../images/content_box_head_bg.jpg); background-repeat:repeat-x;*/
background: #880C1B; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#7e99a4), to(#9db5bf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #880C1B, #66000E); /* for firefox 3.6+ */
padding:4px;
height:42px;
font-size:20px;
}
div.PageContent
{
width:95%;
background:#E5DBCC;
color:#000;
border-left: #7C96A1 1px solid;
border-bottom:#7C96A1 1px solid;
border-right:#7C96A1 1px solid;
padding: 4px;
overflow: hidden;
text-align:justify;
min-height:400px;
}
div.main
{
width: 85%;
margin-right: auto;
margin-top: 10px;
margin-left: 140px;
margin-bottom: 10px;
font-size: 11px;
/*position:relative; */
/*border: #CCC 1px solid; */
overflow:visible;
}
form
{
width:900px;
height:500px;
position:relative;
margin-right: auto;
margin-left: auto;
}
IE needs an explicit setting
leftto accompany the absolute positioning. setleft:0on the navigation container and it’ll work.