views:

970

answers:

2

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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 &copy; 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;
}
+1  A: 

Having a width of 90% on your page wrap may not be the best idea. Setting a pixel value (say 800px) will eliminate some of the issues you may be having with jumping content.

Also, you should modify div#title and div#logindisplay

#title
{
    width: 600px;
    float:left;
}

#logindisplay
{
   font-size:1.1em;
   float:right;
   text-align:right;
   padding:10px;
   color:White;
   width:150px;
}

It seems like you want your page centered. IE6 needs a little help. (text-align:center;)

body
{
    background-color: #5c87b2;
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    text-align:center;
}
superUntitled
This is a css issue.
superUntitled
A: 

Is it worthwile trying to make it look good in IE6. It is on the way out and very few people use it. If you create web sites for IE7 + 8 and also Firefox 2 + 3 then you have covered 80% of your market.

uriDium
As annoying as IE6 is, it still represents quite a market share of browsers - http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2 - has it at 20%. It's the default version in XP after all, and a lot of corporate environments aren't willing to upgrade
iAn
Are you sure it's a good idea to have 1 in 5 people looking at an ugly version of your website?
AdamRalph
It is till under the top 5 of browsers used by average users. Since the market doesn't want to get rid of XP and it comes with 6 loaded as default.... You catch my drift.
Diago