Menu css : Firefox Ok - IE Ko [Résolu]

Menu css : Firefox Ok - IE Ko [Résolu] - HTML/CSS - Programmation

Marsh Posté le 24-03-2006 à 14:20:39    

Salut !
 
Bon pour commencer, ça ce passe ici : http://www.milord.info et la http://www.milord.info/style.css
 
Autant Firefox me fait à peu près ce que je veux autant IE me rend  :pt1cable:
Entre les lignes de boutons qui sont séparées de quelques pixels et les boutons qui s'étendent des fois sur 2 lignes, je m'en sors pas...Et c'est la ou j'ai besoin de votre coup de main ;)
 
Merci


Message édité par gooopil le 04-04-2006 à 18:24:03
Reply

Marsh Posté le 24-03-2006 à 14:20:39   

Reply

Marsh Posté le 24-03-2006 à 15:41:53    

Le classique display block sur les a dans les li dans le ul :D (N'allez pas croire qu'il manque <ul> dans le <li> )
 
C'est très simple. Quand IE voit ça :

<li><a href="pouet">Pouet</a></li>
<li><a href="truc">Truc</a></li>


En interne, il vire le </li> (règle de l'HTML4, t'as pas besoin de mettre la balise de fin pour <li> ). Et comme un con, il prend en compte les espaces blanc situés entre le </li> et le <li> suivant... Donc ça te donne  un truc du style :

<li>[fixed]<li><a href="pouet">Pouet</a>          <li><a href="truc">Truc</a>           <li>....


 
Donc t'as ton a en display block qui prend toute la largeur du li... Il faut maintenant afficher quelque part l'espace blanc.... Et devine où ? En dessous du <a>... D'où l'espace entre les deux...
 
Solution possible, écrire ta liste comme ça :

<ul><li><a href="pouet">Pouet</a></li><li
><a href="truc">Truc</a></li><li
<a href....


[:enzan]
Ou alors essaye un display: inline sur les li...
 
Bref, vivement IE7 qui devrait corriger ça... Peut-être... A vérifier... Arghhhh


Message édité par FlorentG le 24-03-2006 à 15:42:18
Reply

Marsh Posté le 24-03-2006 à 15:43:44    

t1 c'est la folie c'est daube quand même oO

Reply

Marsh Posté le 24-03-2006 à 15:45:00    

Ouais, développeur web est un métier où on se marre au moins 10 fois par jour :D

Reply

Marsh Posté le 24-03-2006 à 15:45:57    

j'avoue, ils sont comiques là ^^

Reply

Marsh Posté le 25-03-2006 à 03:29:12    

Bon ben j'ai essayé les deux (le display :inline et l'écriture des <li   >.... -c'est celle que j'ai laissé sur l'adresse indiquée plus haut-) mais rien à faire ça reste comme ça. Merci quand même :) . ..Quelque chose que je fais mal ?


Message édité par gooopil le 30-03-2006 à 15:49:46
Reply

Marsh Posté le 26-03-2006 à 22:54:16    

Un petit up post-week-end...

Reply

Marsh Posté le 29-03-2006 à 15:01:04    

up

Reply

Marsh Posté le 03-04-2006 à 20:52:21    

Y doit bien y avoir un moyen :(

Reply

Marsh Posté le 04-04-2006 à 00:52:45    

en fait, pourquoi tu vire pas les li?

Reply

Marsh Posté le 04-04-2006 à 00:52:45   

Reply

Marsh Posté le 04-04-2006 à 02:34:30    

Chais pas moi, pour représenter la valeur sémantique d'une liste de lien...Par habitude en fait quoi ;) Je vais essayer sans, on verra bien :)
 
Merci :)


Message édité par gooopil le 04-04-2006 à 02:34:57
Reply

Marsh Posté le 04-04-2006 à 08:51:14    

Sinon fout un :

* html ul li {
  height: 1%;
}


Histoire de voir...

Reply

Marsh Posté le 04-04-2006 à 10:01:13    

il y a peu être une solution en ajoutant un span autour de <li>, alors je me suis dit, autant virer ces <li> et mettre directement span ou div..

Reply

Marsh Posté le 04-04-2006 à 18:23:26    

Bon ben voila c'est résolu :D J'ai essayé la dernière proposition de FlorentG mais sans succès, donc j'ai remplacé les <li> par des <span> comme l'a proposé nargy et ça marche comme je veux. Donc merci bien à tous les deux :)
 
Moral: respecter la sémantique c'est bien, sauf quand ça marche pas :p

Reply

Marsh Posté le 04-04-2006 à 18:37:50    

Très beau menu!

Reply

Marsh Posté le 04-04-2006 à 18:42:52    

Merci :) (J'espère que t'as regardé avec FF, j'ai pas mis en ligne après modification ;))
 
Au passage, c'est marrant, avant ça marchait bien avec FF et pas IE, maintenant IE passe mais la partie de droite du menu sous FF se barre en dessous, bien à droite, mais en dessous  :lol:  :sweat:


Message édité par gooopil le 04-04-2006 à 18:46:27
Reply

Marsh Posté le 04-04-2006 à 18:46:05    

essaye diverse combinaisons de white-space:nowrap/pre, et display:block/inline

Reply

Marsh Posté le 04-04-2006 à 18:47:08    

sous FF cest nikel
opera aussi
konqueror aime bien aussi


Message édité par nargy le 04-04-2006 à 18:51:11
Reply

Marsh Posté le 04-04-2006 à 18:49:42    

nargy a écrit :

essaye diverse combinaisons de white-space:nowrap/pre, et display:block/inline


J'y étais dessus :) En fait j'avais un clear:both qui avait atteri la ou il devait pas :)

Reply

Marsh Posté le 04-04-2006 à 18:58:02    

J'ai mis le truc qui marche en ligne, me reste plus qu'à me débrouiller pour que les deux menus prennent la même taille automatiquement vu que je tire les cat d'une bdd :)


Message édité par gooopil le 04-04-2006 à 18:58:19
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed