pb de CSS

[jiji31000]

bonjour à tous,

voilà j'ai des problèmes d'affichage sur IE, quelqu'un pourrait-il me dire ce qui manque dans le CSS pour que l'affichage soit bien cadré sur IE

CODE

body {

margin: 0;

padding: 0;

background: #FFFFFF url(../images/img01.gif) repeat-x;

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

color: #737373;

}

form {

margin: 0;

padding: 0;

}

input, textarea {

font-family: Arial, Helvetica, sans-serif;

font-size: 1em;

color: #000000;

}

h1, h2, h3 {

font-family: Arial, Helvetica, sans-serif;

}

h1 {

font-size: 3em;

}

h2 {

font-size: 2em;

}

h3 {

font-size: 1em;

}

p, ul, ol {

margin-bottom: 1.8em;

line-height: 160%;

}

ul, ol {

}

blockquote {

}

a {

color: #414141;

}

a:hover {

text-decoration: none;

}

hr {

display: none;

}

/* Menu */

#menu {

width: 960px;

height: 45px;

margin: 0 auto;

padding: 0px 0;

background: url(../images/img02.jpg) no-repeat center top;

}

#menu ul {

height: 45px;

margin: 0;

padding: 0;

background: url(../images/img03.gif) no-repeat;

list-style: none;

}

#menu li {

float: left;

height: 45px;

background: url(../images/img03.gif) no-repeat right top;

}

#menu a {

float: left;

height: 20px;

margin: 0px;

padding: 10px 15px;

text-decoration: none;

text-transform: uppercase;

font-size: smaller;

font-weight: bold;

color: #000000;

}

#menu a:hover {

background: url(../images/img02.gif) repeat-x;

color: #FFFFFF;

height: 45px;

}

#menu .current_page_item a {

height: 45px;

color: #FFFFFF;

}

/* Splash */

#splash {

width: 960px;

height: 120px;

margin: 0 auto;

}

/* Logo */

#logo {

width: 960px;

height: 91px;

margin: 0 auto;

border-bottom: 6px solid #3F3F3F;

color: #414141;

}

#logo h1, #logo h2 {

margin: 0;

padding: 0 20px;

}

#logo h1 {

float: left;

padding-top: 30px;

letter-spacing: -3px;

text-transform: uppercase;

font-size: 3em;

}

#logo h2 {

float: right;

padding-top: 49px;

letter-spacing: -1px;

text-transform: uppercase;

font-weight: bold;

font-size: 16px;

}

#logo a {

text-decoration: none;

color: #414141;

}

/* Page */

#page {

width: 960px;

margin: 0 auto;

padding: 30px;

}

/* Content */

#content {

float: right;

width: 680px;

}

.post {

padding-bottom: 20px;

}

.post .title {

margin: 0;

padding: 5px 20px;

letter-spacing: -2px;

border-bottom: 1px dashed #B9B9B9;

text-transform: uppercase;

font-size: 24px;

}

.post .title a {

text-decoration: none;

}

.post .entry {

padding: 10px 20px;

}

.post .meta {

height: 26px;

background: #F5F5F5;

border-top: 1px solid #E9E9E9;

text-decoration: none;

text-transform: uppercase;

font-size: smaller;

}

.post .posted {

float: left;

height: 16px;

padding: 5px 20px;

}

.post .permalink, .post .comments {

float: right;

height: 16px;

padding: 5px 20px;

}

.post .permalink {

}

/* Sidebar */

#sidebar {

float: left;

width: 250px;

}

#sidebar ul {

margin: 0;

padding: 0;

list-style: none;

}

#sidebar li {

margin-bottom: 20px;

}

#sidebar li ul {

padding: 20px;

}

#sidebar li li {

margin: 0;

padding-left: 10px;

padding-bottom: 5px;

background: url(../images/img04.gif) no-repeat left 50%;

}

#sidebar p {

padding: 0 20px;

}

#sidebar h2 {

height: 20px;

margin: 0;

padding: 6px 0 0 20px;

background: url(../images/img07.jpg) no-repeat;

border-bottom: 1px dashed #B9B9B9;

text-transform: uppercase;

font-size: 14px;

font-weight: bold;

color: #000000;

}

/* Search */

#search form {

padding: 20px;

}

#search br {

display: none;

}

#search #s {

width: 135px;

}

/* Calendar */

#calendar_wrap {

padding: 15px 20px;

}

#calendar table {

width: 100%;

background: #FFFFFF;

border: 1px solid #FFFFFF;

text-align: center;

}

#calendar thead {

background: #161616;

}

#calendar tbody td {

background: #FFFFFF;

border: 1px solid #FFFFFF;

}

#calendar #prev {

text-align: left;

}

#calendar #next {

text-align: right;

}

#calendar tfoot a {

text-decoration: none;

font-weight: bold;

}

#calendar #today {

background: #121210;

border: 1px solid #FFFFFF;

font-weight: bold;

color: #CF3822

}

/* Footer */

#footer {

clear: both;

width: 960px;

height: 50px;

margin: 0 auto;

padding: 20px 0;

border-top: 6px solid #3F3F3F;

font-size: smaller;

}

#footer p {

margin: 0;

text-align: center;

line-height: normal;

}

merci

[franglix]

Il faut plutôt que vous nous montrez le lien vers la page qui est mal affichée.

[ghost]

Salut,

Sans le code html qui va bien avec ou mieux une page en ligne, vaut mieux consulter un oracle

[jiji31000]

CODE

!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="keywords" content="texte" />
<meta name="description" content="mon texte" />
<link href="css.css" rel="stylesheet" type="text/css" media="screen" />

<title>MySite</title>


</head>
<body bgcolor="#FFFFFF">

<div id="menu">
<ul>
<li>Menu1</li>
<li >Menu2 </li>
<li >Menu3</li>
</ul>
</div>
<div id="logo">
<h1>MySite </h1>
</div>
<div id="splash">
bandeau-image</div>
<br />
<div id="page">
<div id="content">


<h2 class="title">titre</h2>
<div class="entry">


</div>




</div>

<!-- end #content -->
<div id="sidebar"><!--###sidebar### begin -->
<ul>
<li>
<h2> A </h2>
<ul>
<li>a</li>
<li>aa</li>
<li>aaa</li>
<li>aaaa</li>
<li>aaaaa</li>
<li>aaaaaa</li>
</ul>
</li>
<li id="search">
<h2> Recherche</h2>
</li>
<li id="newsletter">
<h2 class="title">Newsletter</h2>
</li>
<li id="calendar">
<h2> Calendrier</h2>
<
</div>
</li>
<li>
<h2> B </h2>
</li>
</ul>
</div>

</div>

<div id="footer"><
<p>© 2007 mysite </p>
</div>
</body>
</html>

voici le code html Modifié 1 Mars 2008 par jiji31000

[iNCiTE Web]

Moi je dirais la déclaration du doc type invalide (il manque l'url), donc IE passe en mode Quirks (un peu de lecture)

Remplace ta 1ère ligne par :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Et corrige aussi toutes tes erreurs de code avec un validateur (par exemple, 2 fois le content-type)

[jiji31000]

oui, merci j'ai corrigé

j'ai même eu la validation et pourtant l'affichage est toujours différent sur IE

[iNCiTE Web]

Ben dis moi quelles différences alors, parce que chez moi c'est pareil sous FF 2 et IE7...

[jiji31000]

Ben dis moi quelles différences alors, parce que chez moi c'est pareil sous FF 2 et IE7...

salut,

le côté gauche n'est pas aligné avec le contenu (il est beaucoup plus bas, sur IE)

[iNCiTE Web]

Tout ce que je vois, c'est le ".titre" et le "B" qui sont sous la ligne de pointillés sous FF et sous IE le ".titre" est au dessus.

Sinon c'est identique (avec quelles versions testes-tu ?)

[jiji31000]

je teste avec IE7 et mozilla 2.0.0.12

[iNCiTE Web]

Tu veux pas me faire une capture d'écran en me montrant le prob ? moi le seul truc que je vois c'est ce que je t'ai indiqué (les pointillés)

En sachant aussi que la disposition et mise en page peut changer en fonction du contenu qu'il y aura par la suite (hauteur des div par exemple) et donc qu'il peut être pas mal de remplir pour voir ce que ça donne...