Jump to content
Sign in to follow this  
jiji31000

pb de CSS

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Salut,

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

Share this post


Link to post
Share on other sites
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 Edited by jiji31000

Share this post


Link to post
Share on other 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)

Share this post


Link to post
Share on other sites

oui, merci j'ai corrigé

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other 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)

Share this post


Link to post
Share on other sites

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 ?)

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...