I have an ASP.NET MVC View that works great on IE7, but looks really crappy when I try to view it with IE6. With IE6, the white area of the page (the ContentPlaceHolder part) is bunched over to the right and does weird things like move around when I resize the window. I have looked in the .aspx, Site.Master, and Site.css to see what is the problem but I can't find it anywhere! Can someone help? Here are my files:
Login.aspx:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="EventScheduler.View.Views.Account.Login" %>
<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Login</h2>
<p>
Please enter your username and password below.
</p>
<%= Html.ValidationSummary() %>
<% using (Html.BeginForm()) { %>
<div>
<table>
<tr>
<td>Username:</td>
<td>
<%= Html.TextBox("username") %>
<%= Html.ValidationMessage("username") %>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<%= Html.Password("password") %>
<%= Html.ValidationMessage("password") %>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</div>
<% } %>
</asp:Content>
Site.Master:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="EventScheduler.View.Views.Shared.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">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><%= Html.Encode(ViewData["Title"]) %></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>ASCCC Event Scheduler Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LoginUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
ASCCC Event Scheduler Application © Copyright 2009
</div>
</div>
</div>
</body>
</html>
Site.css:
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
background-color: #5c87b2;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
a:link
{
color: #034af3;
text-decoration: underline;
}
a:visited
{
color: #505abc;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #12eb87;
}
p, ul
{
margin-bottom: 20px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
h1
{
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
h2
{
padding: 0 0 10px 0;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header
{
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
}
#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;
}
#main
{
padding: 30px 30px 15px 30px;
background-color: #fff;
margin-bottom: 30px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#footer
{
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
}
/* TAB MENU
----------------------------------------------------------*/
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
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: #034af3;
}
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;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.error
{
color:Red;
}
#menucontainer
{
margin-top:40px;
}
#title
{
display:block;
float:left;
text-align:left;
}
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
#logindisplay a:link
{
color: white;
text-decoration: underline;
}
#logindisplay a:visited
{
color: white;
text-decoration: underline;
}
.field-validation-error
{
color: #ff0000;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
body
{
}
.button
{
width:75px
}
.eventLink
{
}
.alert
{
color:Red
}
.message
{
color:Green
}
.registrationField
{
width:700px
}
.registrationField_Enabled
{
background-color:#336699;
width:700px
}
.fieldName
{
}
.requiredBox
{
}
.detailType
{
}
.fieldOptions
{
}
.pageTitle
{
color:Black;
font-size:large
}
.pageSubTitle
{
color:Black;
font-size:medium
}
.staticFieldLabel
{
color:Black;
width:150px
}
.staticFieldTextBox
{
width:250px
}
.dynamicFieldLabel
{
color:Black;
width:150px
}
.dynamicFieldDropDown
{
width:250px
}
.dynamicFieldPhoneNumberUS1
{
width:30px;
}
.dynamicFieldPhoneNumberUS2
{
width:30px;
}
.dynamicFieldPhoneNumberUS3
{
width:40px;
}
.dynamicFieldPhoneNumberUS4
{
width:40px;
}