1

J'ai une ASP.NET MVC View qui fonctionne très bien sur IE7, mais l'air vraiment merdique quand j'essaie de voir avec IE6. Avec IE6, la zone blanche de la page (la partie ContentPlaceHolder) est regroupée vers la droite et fait des choses bizarres comme se déplacer lorsque je redimensionne la fenêtre. J'ai regardé dans le .aspx, Site.Master, et Site.css pour voir quel est le problème mais je ne peux pas le trouver n'importe où! Quelqu'un peut-il aider? Voici mes fichiers:Mise en page HTML semble bien dans IE7 mais pas IE6

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 &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; 
} 

Répondre

1

Avoir sur une largeur de 90% votre page wrap peut ne pas être la meilleure idée. Définir une valeur de pixel (disons 800px) éliminera certains des problèmes que vous pourriez rencontrer avec le contenu de saut.

En outre, vous devez modifier div # titre et div # logindisplay

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

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

Il semble que vous voulez que votre page centré. IE6 a besoin d'un peu d'aide. (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; 
} 
+0

Ceci est un problème de css. – superUntitled

0

Est-ce worthwile essayer de le faire bien paraître dans IE6. Il est en voie de disparition et très peu de gens l'utilisent. Si vous créez des sites Web pour IE7 + 8 et Firefox 2 + 3, vous avez couvert 80% de votre marché.

+0

Aussi ennuyeux que IE6, il représente encore une bonne part du marché des navigateurs - http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2 - il a 20%. C'est la version par défaut dans XP après tout, et beaucoup d'environnements d'entreprise ne veulent pas mettre à jour – Ian

+0

Êtes-vous sûr que c'est une bonne idée d'avoir 1 personne sur 5 regardant une version laide de votre site Web? –

+0

Il est jusqu'à sous le top 5 des navigateurs utilisés par les utilisateurs moyens. Depuis le marché ne veut pas se débarrasser de XP et il est livré avec 6 chargé par défaut .... Vous attrapez ma dérive. – BinaryMisfit

Questions connexes