[XHTML] Problème de padding pour un menu dans une frame [IE bug!]

Problème de padding pour un menu dans une frame [IE bug!] [XHTML] - HTML/CSS - Programmation

Marsh Posté le 25-11-2003 à 10:22:31    

Bonjour [:zytra]
Voilà j'ai à nouveau un problème avec mon intranet (décidément!). Cette fois il s'agit d'un problème de menu, qui se trouve dans une frame.
Voici une vue d'ensemble:
http://www.mangaclub.ch/urd/imagecenter/Perso/82.png
 
le problème est noté par les flèches; comme vous pouvez le voir, parfois le texte est masqué par l'ascenseur (si la fenêtre est assez grande et que l'ascenseur n'est pas là, il n'y a aucun problème).
 
voici les styles de cette page:

Citation :


body {
 background-color: #CCCCCC;
}
a.menuLeft {
 width: 170px;
 border-top: 1px white solid;
 display: block;
 border-collapse: collapse;
 padding-left: 18px;
 padding-right: 17px;
 color: black;
 text-decoration: none;
 font-size: smaller;
}
a.menuLeft:hover {
 background-color: white;
}
a.menuLeftIndent2 {
 padding-left: 28px;
}
a.menuLeftIndent3 {
 padding-left: 38px;
}
a.menuLeftSelected {
 background-color: white;
}
div.ligneHaut {
 width: 200px;
 border-top: 1px white solid;
}


j'ai essayé de mettre un padding-right sur le style menuLeftIndent3, ceci sans effet. Je sèche sur la solutions à appliquer.
 
Si qqun a une idée, merci de me la transmettre [:dawa]
 
PS: pour par exemple un sous-menu, j'applique le style menuLeft + menuLeftIndent2


Message édité par urd-sama le 25-11-2003 à 13:40:03
Reply

Marsh Posté le 25-11-2003 à 10:22:31   

Reply

Marsh Posté le 25-11-2003 à 10:41:08    

tu peux pas redimentionner la frame tout simplement?

Reply

Marsh Posté le 25-11-2003 à 10:42:54    

non je peux pas, ca fait partie des standards
et je pense pas que ca réglerais le problème, vu que c'est mon texte qui déborde

Reply

Marsh Posté le 25-11-2003 à 10:44:26    

ben justement en mettant la frame de gauche plus large le texte deborderait pas.
 
M'enfin si tu peux pas, faut partir sur autre chose

Reply

Marsh Posté le 25-11-2003 à 10:48:42    

ca règle pas vraiment le problème mais j'ai déjà réussis à fortement minimiser le problème en redéfinissant la lageur des sous-menus:

Citation :


a.menuLeftIndent2 {
 width: 155px;
 padding-left: 28px;
}
a.menuLeftIndent3 {
 width: 145px;
 padding-left: 38px;
}


en fait le padding rajoute à la largeur, ce qui était le problème.

Reply

Marsh Posté le 25-11-2003 à 11:05:42    

Attention cela dit. IE a une manière particulière de gérer les padding (en rajoutant à la largeur), mais les autres navigateurs ne le font pas.
 
-> il existe un hack pour avoir le même résultat avec IE et reste du monde.
 
Mais si c'est un intranet sous IE, l'affaire est réglée.
 
EDIT : t'as fait le test avec margin plutôt que padding ? Je me souviens plus si le problème est identique ou non...


Message édité par deliriumtremens le 25-11-2003 à 11:06:26
Reply

Marsh Posté le 25-11-2003 à 11:16:32    

ah ben on y est, ie bug [:dawa]
effectivement le probème est identique avec margin, car j'ai aussi tester.
mais bon, comme tu dis, c'est un intranet ie only (d'ailleurs blocage systématique avec tentative d'un autre browser).
Donc il n'y a pas de solution "propre" en résumé alors

Reply

Marsh Posté le 25-11-2003 à 11:20:16    

ha ben tient tu vient de repondre a une de mes question potentiel a savoir "pourquoi mon foutu padding-bottom:3px marche sous moz et pas IE

Reply

Marsh Posté le 25-11-2003 à 11:21:54    

et y'a aucune autre propriété qui pourrait dire "une marge à l'intérieur stp" pour ie?
si ce n'est pas le cas c'est super stupide [:dawa]

Reply

Marsh Posté le 25-11-2003 à 11:34:40    

non, mais ça ne change pas grand chose.
 
Pour IE, tu mets padding + width= largeur réelle
-> comme tu l'as fait, on joue sur un "width" réduit en fonction du padding. La largeur du texte dépend du width
 
Pour les autres, tu mets width=largeur désirée
la largeur du texte étant réduite par le padding...
 
->résultat idem.
 
EDIT grillé comme une vile merguez : le hack (BoxModelHack) en question

Code :
  1. .vert {
  2.   background-color: #00ff00;
  3.   padding: 0 20px;
  4.   border-left: 5px solid #00ff00;
  5.   border-right: 5px solid #00ff00;
  6.   width: 300px;
  7.   voice-family: "\"}\"";
  8.   voice-family:inherit;
  9.   width: 250px;
  10. }
  11. html>body .vert {
  12.   width: 250px;
  13. }


tout est là


Message édité par deliriumtremens le 25-11-2003 à 11:38:46
Reply

Marsh Posté le 25-11-2003 à 11:34:40   

Reply

Marsh Posté le 25-11-2003 à 11:36:48    

wai mais bon si on a une largeur variable, on peu pas la specifiée et du coup le padding marche pas

Reply

Marsh Posté le 25-11-2003 à 13:19:00    

ah excellent, je vais jouer là-dessus si j'ai le temps alors
merci beaucoup :jap:

Reply

Marsh Posté le 25-11-2003 à 13:37:26    

chacal_one333 a écrit :

wai mais bon si on a une largeur variable, on peu pas la specifiée et du coup le padding marche pas


 
ben si mets la largeur en %  :)


Message édité par Flyman30 le 25-11-2003 à 13:37:49
Reply

Marsh Posté le 25-11-2003 à 13:47:03    

ben nan, enfin je croit pas.
Voila le truc :
 
j'ai 5 icones les une sur les autres en colonne donc.
La hauteur de cette colonne peu etre variable de 30 a 1000px s'il le faut.
Donc moi j'avait entourer chaque icones d'un joli span avec un attribut de padding-bottom:5px; pour que sous chaque icone il y ai un ptit espace.
 
Tout ca marche nikel mais dans IE les icone s'emplille et ca fait pas chouette.
Donc suivant ta demarche je devrait mettre un %.
Le probleme c'est que si la colonne fait 500px jme retrouverai avec trop de pixel et vice versa si la colonne fait 30px

Reply

Marsh Posté le 25-11-2003 à 13:54:08    

chacal_one333 a écrit :

ben nan, enfin je croit pas.
Voila le truc :
 
j'ai 5 icones les une sur les autres en colonne donc.
La hauteur de cette colonne peu etre variable de 30 a 1000px s'il le faut.
Donc moi j'avait entourer chaque icones d'un joli span avec un attribut de padding-bottom:5px; pour que sous chaque icone il y ai un ptit espace.
 
Tout ca marche nikel mais dans IE les icone s'emplille et ca fait pas chouette.
Donc suivant ta demarche je devrait mettre un %.
Le probleme c'est que si la colonne fait 500px jme retrouverai avec trop de pixel et vice versa si la colonne fait 30px


 
Je suis contre les hacks. Je trouve qu'il vaut mieux à l'heure actuelle 2 divs l'un dans l'autre, le deuxième définissant la marge.


Message édité par Hermes le Messager le 25-11-2003 à 13:54:24
Reply

Marsh Posté le 25-11-2003 à 19:18:21    

Hermes le Messager a écrit :

Je suis contre les hacks. Je trouve qu'il vaut mieux à l'heure actuelle 2 divs l'un dans l'autre, le deuxième définissant la marge.


Les hacks ont l'avantage de tirer parti des CSS ;) Si un jour on décide que le hack est inutile, il suffit de changer la CSS. Alors que ton DIV supplémentaire il va falloir le modifier sur toutes tes pages.
 
Mais bon, les hacks restent tout de même l'exception. Il faut pas en abuser...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 25-11-2003 à 20:08:50    

jcomprend pas le concept de hack la.
 
bon ya un bug IE, mais en quoi on "hack" le truc en servant de css et html :??:

Reply

Marsh Posté le 25-11-2003 à 21:44:05    

Attention, IE6 n'est pas affecté par le bug de parsing dont tire profit le BoxModelHack

Reply

Sujets relatifs:

Leave a Replay

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