Aller au contenu

pb de CSS


jiji31000

Sujets conseillés

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

Lien vers le commentaire
Partager sur d’autres sites

Salut,

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

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)
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é par jiji31000
Lien vers le commentaire
Partager sur d’autres sites

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)

Lien vers le commentaire
Partager sur d’autres sites

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)

Lien vers le commentaire
Partager sur d’autres sites

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...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...