[Résolu] Décalage IE

Bonsoir tout le monde.

J'ai 2 problèmes de décalage sous IE.

Le premier concerne mes séparations dans le menu principal :

Les "Barres" verticales.

Le second problème concerne mes séparations entre mes blocs :

Les traits d'1 pixel.

Je ne trouve pas la solution, pouvez-vous m'aider ?

Merci
Modifié par yank (01 Aug 2010 - 21:51)

Le Code HTML pour les séparations des listes du menu :

<div id="menu">
<ul class="sf-menu">
<li><a href="accueil.html">Accueil</a></li><span>|</span>
<li><a href="cabinet.html">Le Cabinet</a></li><span>|</span>
<li><a href="activites.html">Activités</a>
<ul>
<li><a href="#item1.1"><span>Droit public</span></a></li>
<li><a href="#item1.2"><span>Droit des affaires</span></a></li>
<li><a href="#item1.3"><span>Droit immobilier</span></a></li>
</ul>
</li><span>|</span>
<li><a href="ressources.html">Ressources</a></li><span>|</span>
<li><a href="contact.html">Contact</a></li></ul></div>

La Css :

#menu li a {text-decoration:none;color:#333;}
#menu li a:hover {color:#666;}
#menu ul {padding-top:7px;padding-left:35px;}
#menu ul span {float:left;}

Le code HTML des séparations en milieu de page :

<div id="content">

<div class="titre-principal"><h1>Le Cabinet</h1></div>

<div class="bloc1">
<h2>Blabla</h2>
<p>Lorem Ipsum ...</p>
</div>

<div class="sep1"></div>

<div class="bloc2">
<p>Lorem Ipsum ...</p>
</div>

<div class="sep2-cabinet"></div>

<div class="titre-activites"><h1>Activités</h1></div>

<div class="bloc3">
<ul>
<li><h2><a href="activites.html#droit-public">Droit Public</a></h2></li>
<li><h2><a href="activites.html#droit-des-affaires">Droit des Affaires</a></h2></li>
<li><h2><a href="activites.html#droit-immobilier">Droit immobilier</a></h2></li>
</ul></div>

<div class="spacer"></div>

</div><!-- FIN CONTENT -->

La Css :

.sep1 {
        background-image: url(visuels/sep1.png);
	background-repeat: no-repeat;
	width:1px;
	height:335px;
	position:absolute;
	margin-left:330px;
	margin-top:65px;}

.sep2-cabinet {
        background-image: url(visuels/sep1.png);
	background-repeat: no-repeat;
	width:1px;
	height:335px;
	position:absolute;
	margin-left:630px;
	margin-top:65px;}

Merci ...

MAJ

Problème résolu pour les séparations de milieu de page en utilisant les Float Left :

.sep1 {
       background-image: url(visuels/sep1.png);
	background-repeat: no-repeat;
	width:1px;
	height:335px;
	float:left;
	margin-top:65px;}

.sep2-cabinet {
      background-image: url(visuels/sep1.png);
	background-repeat: no-repeat;
	width:1px;
	height:335px;
	float:left;
	margin-top:65px;}
.bloc3 {
	float:right;
	width: 215px;
}

Il me reste l'espère de Scrollbar horizontale en bas qui est dû je pense au Footer.

Je cherche ...

Par contre je n'ai pas encore résolu pour le menu ...

REMAJ

Concernant la scrollbar, ça venait bien de mon "foot", résolu en ajoutant un Width et text-align Center :

.foot {position:absolute; margin-top:-5px;font-style:italic; font-weight:bold;color:#666; text-align:center;width:865px;}

Modifié par yank (01 Aug 2010 - 20:55)

Concernant les séparations du menu je ne trouve pas.

Quelqu'un a t-il une solution ?

HTML :

<div id="menu">
<ul class="sf-menu">
<li><a href="accueil.html">Accueil</a></li><span>|</span>
<li><a href="cabinet.html">Le Cabinet</a></li><span>|</span><li>
<a href="activites.html">Activités</a>
<ul>
<li><a href="#item1.1"><span>Droit public</span></a></li>
<li><a href="#item1.2"><span>Droit des affaires</span></a></li>
<li><a href="#item1.3"><span>Droit immobilier</span></a></li>
</ul>
</li><span>|</span>
<li><a href="ressources.html">Ressources</a></li><span>|</span>
<li><a href="contact.html">Contact</a></li></ul></div>

CSS :

#menu ul span {float:left;}

Le problème en image :

http://img43.imageshack.us/img43/15/sepef.th.jpg

Ne trouvant pas la solution j'ai opté pour une autre méthode.

J'ai retiré toutes les séparations dans le HTML pour le faire directement en CSS :

#menu ul li { border-right:1px solid #333; height:15px;}

A la base je ne voulais pas que le dernier lien ait une séparation sur sa droite, mais tanpis ...

Merci quand même.

Hello Yank,

Tu peux ajouter une classe sur le dernier li :

#menu ul li.last { border-right:none;}

Passer par la pseudo class :last-child :

#menu ul li:last-child { border-right:none;}

Mais les versions d'IE<9 n'aimeront pas

Passer par javascript pour rajouter une classe sur le dernier li, ou modifier le css, pour peu que tu utilises déjà un script ou une librairie js sur tes pages, cela se fera très rapidement (jquery par exemple)

Cdt,
Sylvain

6l20 a écrit :

Tu peux ajouter une classe sur le dernier li :

#menu ul li.last { border-right:none;}

Passer par la pseudo class :last-child :

#menu ul li:last-child { border-right:none;}

Mais les versions d'IE<9 n'aimeront pas
Passer par javascript pour rajouter une classe sur le dernier li, ou modifier le css, pour peu que tu utilises déjà un script ou une librairie js sur tes pages, cela se fera très rapidement (jquery par exemple)
Cdt,
Sylvain

Salut,

Merci pour ta solution, effectivement ça fonctionne bien.

Quand tu dis que les versions d'IE<9 n'aimeront pas, c'est simplement qu'elles ne prendront pas en compte la classe, rien de plus ?

Hello,

Sans vouloir dire de bétise, il me semble qu'IE jusqu'à sa 8ème version n'implémente pas la pseudo-classe :last-child

Maintenant que j'y pense, tu dois également pouvoir utiliser les sé­lec­teurs d’en­fants ad­ja­cents pour cibler le dernier li

Autre méthode également :

li:after {
content: ' | ';
}
li:last-child:after {
content: '';
}

Mais c'est toujours assujetti à l'implémentation des navigateurs

Voili, voilou...

6l20 a écrit :
Hello,
Sans vouloir dire de bétise, il me semble qu'IE jusqu'à sa 8ème version n'implémente pas la pseudo-classe :last-child
Maintenant que j'y pense, tu dois également pouvoir utiliser les sé­lec­teurs d’en­fants ad­ja­cents pour cibler le dernier li
Autre méthode également :

li:after {
content: ' | ';
}
li:last-child:after {
content: '';
}

Mais c'est toujours assujetti à l'implémentation des navigateurs
Voili, voilou...

Ouep, la méthode du after content je la connais et Ie ne prend rien en compte il me semble.

De toute façon j'ai opté pour la 1ere méthode :

#menu ul li:last-child { border-right:none;} 

Ca me convient parfaitement.

Sinon j'ai vérifié, Ie ne prend pas en compte cette classe et donc affiche la barre mais entre nous ce n'est pas bien grave

Merci pour ton aide