Webmaster Hub > pb de CSS

Version complète: sur le forum Webmaster Hub : pb de CSS

Webmaster Hub > Informatique & Internet > Les Navigateurs

jiji31000

samedi 1 mars 2008 à 15:50

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

samedi 1 mars 2008 à 19:41

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

ghost

samedi 1 mars 2008 à 19:42

Salut,

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

jiji31000

samedi 1 mars 2008 à 20:17

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

iNCiTE Web

samedi 1 mars 2008 à 22:44

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 :

CODE

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

dimanche 2 mars 2008 à 00:56

oui, merci j'ai corrigé

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

iNCiTE Web

dimanche 2 mars 2008 à 10:16

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

jiji31000

dimanche 2 mars 2008 à 13:07

CITATION(iNCiTE Web @ dimanche 2 mars 2008 à 05:16)

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

dimanche 2 mars 2008 à 22:24

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

lundi 3 mars 2008 à 01:18

je teste avec IE7 et mozilla 2.0.0.12

iNCiTE Web

lundi 3 mars 2008 à 08:33

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.