Decalage sous Firefox

26 juillet 2006 à 12:10:00

Bonjour,

voila quelques semaines maintenant que je recherche d'où peut bien venir le mini decalage horizontale que j'ais sur mon site dans mon menu entre les boutons "bio" et "menu".

Pour jetter un oeil c'est par la.

Le probleme n'apparait pas sous internet explorer, uniquement sur firefox !

Vous voyez ? Peut etre pouvez vous m'aider alors.

J'ais tenter beaucoup de petites choses avant de poster sur ce forum.

Ayant deja eu des problemes similaire sur d'autres sites j'ais testé tout ce qui jusque la avait marché. Mais pas moyen, je regle les marges à 0, je regle la taille de la police au minimum (sachant que les bouton du menu font 17px de haut sa devrait passer), j'ais supprimé toutes les marges possibles et imaginables et enfin j'ais fixé la taille de chaque images du menu.

Mais a mon grand desespoire le probleme persiste. Je ne comprend pas pourquoi soudain le bouton "Music" est poussé vers le bas.

Merci de votre aide.

strucky

26 juillet 2006 à 12:34:08

Passe tes images en background de tes balises a.

muldyer

26 juillet 2006 à 12:56:07

Euh ouais mais non, parce que mes bouton dans mon menu sont des images, donc si je les passe en arriere plan des balise <a> il n'y a aucun arriere plan qui s'affiche puisque les <a> sont vides.

En gros cette solution ne m'arrange pas, mais merci quand meme.

D'autres suggestions ?

SdT

26 juillet 2006 à 12:59:59

Salut muldyer,

Heu.. je ne vois pas de décallage entre Bio et Menu.

J'utilise Mozilla FireFox.. Es-tu sûr que ca passe pas sous IE ?

Tu as essayer avec d'autre naviguateur ?

Et... Sinon, envoi nous ton code CSS.

"J'voulais faire, de grandes études j'ai les attitudes..." Meugiwarano, né en 3015 dans un monde lointain de la terre... www.maitre-gims.fr

strucky

26 juillet 2006 à 13:07:22

Citation : muldyer

Euh ouais mais non, parce que mes bouton dans mon menu sont des images, donc si je les passe en arriere plan des balise <a> il n'y a aucun arriere plan qui s'affiche puisque les <a> sont vides.

En gros cette solution ne m'arrange pas, mais merci quand meme.

D'autres suggestions ?

Ben, c'est pourtant la meilleure solution !

Cela n'a rien à voir que tes balises a sont vides, mais parce qu'elles sont de type inline.

Donc passe tes a en display block, et donne leur une largeur et une hauteur.

muldyer

26 juillet 2006 à 21:35:23

Struky, le probleme est que si je fais un lien vide les gens vont cliquer sur quoi ?!

Voici un petit screenshot du rendu a ma maison

Voici mon code css :

body
{
margin:0px;
padding:0px;

background-color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}

#conteneur
{
position:absolute;
left:50%;
margin-left: -425px;

width:840px;
padding:0px;
margin-top:50px;
background-color:#000000;
border: 2px #666666 solid;
}

#corps
{
width:423px;
height:473px;
overflow:auto;

margin-left:201px;
margin-right:200px;
background-image:url(../design/design_04.png);
background-repeat:no-repeat;
border-right: 1px #666666 solid;

color:#FFFFFF;
text-align:justify;
}

#corps table
{
padding:5px;
padding-left:10px;
}

#corps table h4
{
font-size:12px;
color: #FF9900;
font-family: Arial, Helvetica, sans-serif;
}

#corps table p
{
margin-left:10px;
font-size:12px;
color: #CCCCCC;
text-align:justify;
}

#conteneur_coment
{
margin:0px;
width:410px;
height:500px;
overflow:auto;
background-image:url(../design/combg.png);
background-repeat:no-repeat;
background-attachment:fixed;
}

#corps_coment
{
width:350px;
padding:20px;

color:#FFFFFF;
text-align:justify;
}

#corps_coment h4
{
font-size:12px;
color: #FF9900;
font-family: Arial, Helvetica, sans-serif;
}

#corps_coment h5
{
font-size:11px;
color: #FFCC99;
font-family:Arial, Helvetica, sans-serif;
background-color:#CC6633;
}

#corps_coment p
{
margin-left:10px;
font-size:12px;
color: #CCCCCC;
text-align:justify;
}

#corps_coment a
{
color:#FF9933;
}

#corps_coment a:hover
{
color:#FFCC99;
}

#left
{
margin:0px;
padding:0px;
position:absolute;
left:0;
width:201px;
height:473px;
font-size:1px;
}

#left img
{
margin:0px;
padding:0px;
border:0px;
}

#left p
{
margin:0px;
padding:0px;
}

#right
{
position:absolute;
right:0;
width:200px;
height:473px;
padding:5px;

color:#FFCC99;
font-size:11px;
}

#right img
{
border:0px;;
}

#right h4
{
margin:5px;
font-size:11px;
color: #FFCC66;
font-family: Arial, Helvetica, sans-serif;
}

#right a
{
color:#FFCC99;
font-size:11px;
text-decoration:none;
}

#right a:hover
{
color: #FFFFFF;
}

#admin_conteneur
{
width:450px;
color:#FFFFFF;
}

#admin_corps
{
margin:30px;
}

#admin_corps h2
{
color:#0099CC;
font-family: Arial, Helvetica, sans-serif;
}

#admin_corps p
{
margin-left:10px;
font-size:12px;
color:#CCCCCC;
text-align:justify;
}

#corps a, #admin_corps a
{
color: #CC6633;
}

#corps a:hover, #admin_corps a:hover
{
color: #FFCC99;
}

#corps table ul
{
margin-left:5px;
font-size:11px;
list-style-type:circle;
}

legend
{
color: #FFCC99;
}

fieldset
{
border-color: #FFCC99;
}

img
{
border:0px;
}

td
{
vertical-align:top;
}

.float_left
{
float:left;
}

.float_right
{
float:right;
}

strucky

27 juillet 2006 à 10:04:24

Citation : muldyer

Struky, le probleme est que si je fais un lien vide les gens vont cliquer sur quoi ?!

Soit tu n'as pas compris ou soit tu ne veux pas appliquer ce que je t'ai dit.

Ton lien ne sera pas vide puisque ta balise a aura une dimension, et que son background sera celui de ton image.

muldyer

27 juillet 2006 à 12:38:37

Ah oui tiens, j'avais pas pensé ça comme ça, je n'ais jamais utiliser les lien de pareil manière non plus, je testerai alors. Merci.

PS : Je ne voulais pas appliquer un code qui ne me parraissait pas logique

muldyer

28 juillet 2006 à 21:37:42

Bon bon bon, le probleme semble vouloir rester, meme avec ta solution Strucky, j'ais testé et ça ne fonctionne pas vraiment, les liens sont bien visibles et tout, mais il reste des decalages entre les images.

Je suis en ce moment meme entrin d'experimenter une technique qui consiste à mettre une marge negative, ce qui a premiere vue fonctionne a peu pret, mais bon, c'est pas top genial.

Je ne comprend pas, j'ais beau mettre toutes les marges et autres à 0, rien ne change.

EDIT : Bon avec du traficotage de margin-bottom en negatif j'ais réussi a avoir un resultat, malheureusement j'ais un tout petit decalage sous IE tout en bas du menu, mais pas sur FF, les logiciel n'ayant pas la meme façon de prendre en compte les marge, c'est logique.