28172 sujets

CSS et mise en forme, CSS3

Compatibilité padding Safari, FF, IE

Bonjour,

J'ai un petit souci de compatibilité avec un design de menu horizontal.
Je souhaite que la bordure bottom de l'élément <ul> soit superposée avec celle des éléments <li>.
Un rollover fait ensuite changer la couleur de la bordure bottom du <li>

Voici le code HTML:


<div id="menu">
  <ul>
     <li >
	<a href="http://franklin/~max_knopp/lemariagedenatetvince" title="Home"><img src="./wp-content/themes/natetvince/img/home.gif"></a>
     </li>
     <li class="page_item page-item-27"><a href="http://franklin/~max_knopp/lemariagedenatetvince/?page_id=27" title="News">News</a></li>
     <li class="page_item page-item-3"><a href="http://franklin/~max_knopp/lemariagedenatetvince/?page_id=3" title="Photos">Photos</a></li>
     <li class="page_item page-item-8"><a href="http://franklin/~max_knopp/lemariagedenatetvince/?page_id=8" title="Vidéos">Vidéos</a></li>
     <li class="page_item page-item-40"><a href="http://franklin/~max_knopp/lemariagedenatetvince/?page_id=40" title="Liste de Mariage">Liste de Mariage</a></li>
     <li class="page_item page-item-44"><a href="http://franklin/~max_knopp/lemariagedenatetvince/?page_id=44" title="Info Pratiques">Info Pratiques</a></li>
  </ul>
</div>


et le code CSS


#menu {
	width: 980px;
	margin: 40px auto 0 auto;
}

#menu ul {
	margin:0px 60px 0px 60px;
	padding:0;
	width: 860px;
	list-style: none;
	text-align:right;
	float:right;
	font-variant:small-caps;
	display: inline;
	border-bottom-color: #D5H8T9; /*#f5f5f5 */
	border-bottom-style: solid;
	border-bottom-width: 5px;	
}

#menu ul li {
	display: inline;
}

#menu ul li a 
{
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	font-size: 16px;
	color:#999;
	width: 60px;
	height: 22px;
	text-align: center;
	border-bottom-color: #FF0000; /* #f5f5f5*/
	border-bottom-style: solid;
	border-bottom-width: 5px;	
}


Le souci vient du padding-bottom de mes éléments <li>
aucun des navigateurs n'interprètent la chose de la même manière:

Voici une capture de Safari:

upload/5587-Capturedecr.png

Celle de FF ou c'est OK les deux bordures sont bien alignées

upload/5587-Capturedecr.png

Celle de IE qui plante sur une seule...

upload/5587-Capturedecr.png
Modifié par mamax (14 Mar 2010 - 21:58)
Bonjour,

Question bête parce que c'est ce qui me vient directement à l'esprit quand j'entend "IE padding" : la page dispose bien d'un doctype en bonne et due forme placé au tout début du document ?


ps. : quand on parle d'IE, il est bien de préciser la version (6, 7 ou 8).
Modifié par Laurie-Anne (15 Mar 2010 - 08:33)
Pour répondre à ta question:

voici mon DOCTYPE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


J'ai vérifié la validité de ma page et c'est OK.

Pour IE, I beg your pardon, j'ai bien oublié de préciser la version. Il s'agit de IE7 et IE8, qui à ma grande surprise ont exactement le même rendu. j'ai testé avec IE6, mais là c'est une autre histoire...
Bon,

Après recherche, je n'ai pas trouvé de moyen pour avoir un code compatible avec safari et Firefox. Il semble bien que chacun interprète ces déclarations différentes.

Par contre je viens de trouver un code Javascript qui ajoute une class en fonction des navigateurs, ce qui permet de faire des exceptions assez propre sans tous les hacks habituels.

Voici le site:
http://rafael.adm.br/css_browser_selector/

Quelqu'un peut-il me donner son avis sur la validité ou l'accessibilité en utilisant ce genre de méthode?
Bonjour,

J'ai du mal à voir le problème car tes 3 images sont identiques…

<edit
Si c'est au moment du a:hover que se produit le décalage, il serait bon de nous mettre aussi cette partie du css…
Pour l'instant toutes les bordures sont placées de manière satifaisante sur FF, Safari ou Opera…
/>
Modifié par Aureance (15 Mar 2010 - 19:48)
m*1#1#1de... je me suis planté dans les screenshot...
[Edit: en fait non, l'envoi des images bug...]

c'est celle de IE7 qui reviens tout le temps.



APrès plusieurs test c'est du au padding-bottom de l'élément "ul li a".

IE ne plante que sur le premier où il y a une image...
Modifié par mamax (15 Mar 2010 - 20:22)
Bonsoir,

Peut être qu'en ajoutant ceci :
#menu ul li a  
{ 
    position :relative;
    bottom:0;
}

et peut être aussi plus haut :
#menu ul  
{ 
    position :relative;
}
Mis à part ça, la couleur de ta bordure (#D5H8T9) pour #menu ul n'existe pas… On ne peut indiquer que des chiffres de 0 à 9 et des lettres de A à F.
Et je n'ai pas réussi à reproduire le défaut car avec le bout de code fourni : chez moi ça marche (pas vu sur IE : j'ai pas ce truc)
Modifié par Aureance (15 Mar 2010 - 22:07)
mamax a écrit :
Quelqu'un peut-il me donner son avis sur la validité ou l'accessibilité en utilisant ce genre de méthode?
Tout aussi instable que les hacks. Il est possible de tromper la détection de navigateur de JS, tout comme il est possible que JS ne soit pas actié sur la machine.

Les commentaires conditionnels c'est bien, c'est stable (et toute façon le problème c'est toujours IE donc pas besoin de plus) !
mamax a écrit :






#menu ul li a 
{
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	font-size: 16px;
	color:#999;
	width: 60px;
	height: 22px;
	text-align: center;
	border-bottom-color: #FF0000; /* #f5f5f5*/
	border-bottom-style: solid;
	border-bottom-width: 5px;	
}


Le souci vient du padding-bottom de mes éléments <li>
aucun des navigateurs n'interprètent la chose de la même manière:



Bonjour, je pencherais plutot pour un probleme avec <a> et pas forcement <li> (selon le css que tu laisses voir) , pourtant les deux mériteraient peut-être de voir ce display:inline complété ou modifié .
... Comment appliques tu un width ou height a un element par defaut de type "inline" ?


Infos ou questions en vracs:
- Le lien de la page en cours de ton menu est-il désactivé (absence de balise <a> dans le html par exemple).

- Par defaut les images se posent sur le baseline (vertical-align)

- la balise <a> et a:hover embarquent plusieurs bugs ou defauts sous IE-> 7 (plus en particulier la v6 forcement Smiley smile pas troll, pas troll )
Sujet clos
Aller à