28172 sujets

CSS et mise en forme, CSS3

[Résolu] IE mon ami...

Bonjour,

Je finalise un design pour un site internet et je cherche à le rendre compatible pour le légendaire irrespectueux des standards.

Travaillant sous mac, je n'utilise IE qu'en machine virtuelle, et avec parcimonie.
Il se trouve que IE décale mes liens dans le menu upload/17795-Picture1.png

Alors que le résultat normal serait de juste comme ce screen de la vue Firefox.
upload/17795-Picture2.png

Je vous joins le code CSS (valide !)


/* POSITIONNEMENT */

body {
	background: #eaeaea url(images/background.png) repeat-y fixed center ;
	padding:0;
	margin:0;
	font-family:sans-serif;
}

#validated {
       text-align:center;
}

div#wrapper {
	width:850px;
	margin:0 auto;
	padding:0;
}

div#header {
	background: url(images/block.png) repeat-y;
	width:auto;
	margin-top:0;
	margin-bottom:0;
	padding:0;
	height:125px;
	text-align:center;
}

div.blockup {
	background: url(images/blockup.png ) no-repeat;
	width:auto;
	height:20px;
	margin-bottom:0;
}

div.blockdown {
	background: url(images/blockdown.png) no-repeat;
	width:auto;
	height:35px;
	margin-top:0;
}

div#menu-left {
	width:29px;
	height:40px;
	float:left;
	margin:0;
	padding:0;
	background:url(images/menu-left.png) no-repeat;
	border-right: 1px solid #555;
}

#menu-list ul{
	height:40px;
	background:url(images/menu-background.png) repeat-x;
	width:789px;
	margin:0;
	float:left;
	padding:0;
	list-style-type: none;
}

div#menu-right {
	width:30px;
	height:40px;
	float:left;
	margin:0;
	padding:0;
	background:url(images/menu-right.png) no-repeat;

}

div#menu-bottom {
	clear: both;


	width:850px;
	height:20px;
	background: url(images/menu-bottom.png) no-repeat;
}

div#contenu {
	width:850px;
	background: url(images/block.png) repeat-y;
	padding-top:2px;
	padding-bottom:2px;
}

div#footer {
	width:850px;
	background: url(images/block.png) repeat-y;
	padding-top:2px;
	padding-bottom:2px;
}

/* STYLE DU MENU */

#menu {
	text-align:center;
}

#menu-list li{
  margin: 0px;
  padding: 0px;
}

#menu-list a{
	font-family:sans-serif;
  margin: 0;
  padding: 0;
	display:block;
	float:left;
	border-left:1px solid #aaa;
	border-right:1px solid #555;
	height:40px;
	width:129px;
	line-height:40px;
	text-align:center;
	text-decoration:none;
	font-size:1.1em;
	color: #3C8899;
}

#menu-list a:hover {
	color:#fff;
	background:url(images/menu-hover.png) repeat-x;
}

#menu-list .currentpage {
	line-height:40px;
	text-align:center;
	height:40px;
	width:129px;
	border-left:1px solid #aaa;
	border-right:1px solid #555;
	color:#fff;
	background:url(images/menu-hover.png) repeat-x;
	float:left;
}

li.dummy {
	display:block;
	float:left;
	width:1px;
	border-left:1px solid #aaa;
	height:40px;

	line-height:40px;
}

/* FORMATAGE DU TEXTE */

#contenu p, h1, h2, h3, h4, h5 {
	width:790px;
	margin:5px auto;
}


#footer p {
	width:790px;
	margin:5px auto;
	text-align:center;
	font-size:0.8em;
}

#footer a {
	color:#00aecb;
}

#footer a:hover {
	text-decoration:none;
}

#contenu h1 {
	color:#00aecb;
	border-bottom:1px solid #00aecb;
	margin-bottom:15px;
	text-align: center
}

#contenu h2 {
	color:#00aecb;
	border-bottom:1px dotted #00aecb;
	margin-top:15px;
	margin-bottom:15px;	
}

#contenu h3 {
	color:#00aecb;

	margin-top:15px;
	margin-bottom:15px;	
}

#contenu h4 {
	color:#00aecb;

	margin-top:15px;
	margin-bottom:15px;	
}

#contenu h5 {
	color:#00aecb;

	margin-top:15px;
	margin-bottom:15px;	
}

#contenu a {
	color:#00aecb;
}

#contenu a:hover {
	text-decoration:none;
}

/* IMAGES */

#logo {
	padding:0;
	margin:0;
}

dfn {
       display:none;
}


Mon problème se situe comme vous vous en doutez dans la partie #menu-list

D'avance, merci

Khaz
Modifié par Khaz (03 Sep 2008 - 15:27)
Poste le code HTML s'il te plait.

Ça m'est arrivé plusieurs fois, je sais plus si c'est parce qu'il faut mettre tes <li> en "display: inline;"... j'ai un doute.
Le code HTML est généré par mon CMS (CMSMadeSimple)

!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" xml:lang="fr" lang="fr">
<head>
	
<base href="http://wip.khaz.fr/optique/" />
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-6 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
	<link rel="stylesheet" type="text/css" media="screen" href="http://wip.khaz.fr/optique/stylesheet.php?cssid=42&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" media="screen" href="http://wip.khaz.fr/optique/stylesheet.php?cssid=31&amp;mediatype=screen" />

	<title>Optique du 14 Juillet - Accueil</title>
	<link rel="icon" type="image/png" href="images/favicon.png" />	

</head>

<body>

	<div id="wrapper">
		<div id="header">
			<img src="images/logo.png" alt="Optique du 14 Juillet" />	
		</div>
		<div class="blockdown">
		</div>
		
		<div id="menu">

			<div id="menu-left">
			</div>
			
			<div id="menu-list">
				 

<ul>

<li class="currentpage">Accueil


</li>

<li><a href="http://wip.khaz.fr/optique/index.php?p=la-boutique">La Boutique</a>


</li>

<li><a href="http://wip.khaz.fr/optique/index.php?p=marques">Marques</a>


</li>

<li><a href="http://wip.khaz.fr/optique/index.php?p=savoir-faire">Savoir-faire</a>


</li>

<li><a href="http://wip.khaz.fr/optique/index.php?p=encyclopedie">Encyclopédie</a>


</li>

<li><a href="http://wip.khaz.fr/optique/index.php?p=nous-trouver">Nous trouver</a>


</li>
<li class="dummy">&nbsp;</li>
</ul>

                        </div>
			
			<div id="menu-right">	
			</div>
			
			<div id="menu-bottom">

			</div>
			
		</div>
		
		<div class="blockup"></div>
		<div id="contenu">
			<h1>Accueil</h1>
                        <p>page d'accueil</p><br />
		</div>
		<div class="blockdown"></div>

		<div class="blockup"></div>
		<div id="footer">
			<p>
				<a href="http://wip.khaz.fr/optique/index.php?p=nous-contacter" title="Nous contacter">Nous contacter</a>
			</p>
			<p>
				Copyright © 2008 - Optique du 14 Juillet
			</p>

		</div>
		<div class="blockdown"></div>
                <div id="validated"><p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="images/xhtml.png" style="border:0" alt="XHTML 1.0 Strict Valide !" /></a>
&nbsp;
<a href="http://jigsaw.w3.org/css-validator/">
<img src="images/css.png" style="border:0" alt="CSS Valide !" />
</a></p>

 
                </div>
	</div>

</body>
</html>


Merci d'avance,

Khaz
Il n'y a eu aucun changement... c'est à désespérer !
Cela fait pas mal de temps que je cherche à avoir un truc correct et ... rien ne fonctionne...

Let's kick IE from our PC's !
Modifié par Khaz (03 Sep 2008 - 14:57)
Hello Khaz et bienvenue Smiley cligne ,

je n'ai rien vu qui clochait de mon côté en testant ton code...


Edit: à part que pour que le display:none de ta class .dummy il ne sera pris en compte que si tu précises
#menu-list .dummy { ... }
(re)lire la priorité des sélecteurs.
Modifié par Heyoan (03 Sep 2008 - 15:23)
Hello,


#menu-list .currentpage {
	line-height:40px;
	display:block; [#blue]<- il semble qu'il manque un petit point virgule là, non ?....[/#]
	text-align:center;
	height:40px;
	width:129px;
	border-left:1px solid #aaa;
	border-right:1px solid #555;
	color:#fff;
	background:url(images/menu-hover.png) repeat-x;
	float:left;
}


Cdt,
Sylvain
J'ai un peu tripatouillé le code dans le sens que me conseillait jb_gfx.

Cela fonctionne sans problème avec IE 7 à présent et je sens que IE 6 va passer à la trappe de ma liste de compatibilité. Smiley rolleyes Un petit lien pour dire "prenez Firefox et mangez-en car c'est bon pour la santé" et ça sera bon !

Je poste le code pour les futurs paumés (comme moi quoi)

HTML
Au lieu de 

<li class="dummy"></li>

J'ai mis ça :

<li><span class="dummy"></span></li>


CSS

#textlist li {
     display:inline;
}

.dummy {
     display:block;
}


Voilou voilou ^^
Modifié par Khaz (03 Sep 2008 - 15:27)
Euh... comme je te disais c'est une question de priorité des sélecteurs :
#textlist li {
     display:inline;
}
a plus de poids que
.dummy {
     display:block;
}
Il faudrait donc mettre
#id li.dummy

Sinon j'ai testé avec IE6 et ça passe...
Sujet clos
Aller à