Besoin d'aide compatibilité FF vs IE

Bonjour à tous,

nouvellement inscrite sur ce forum, je me permet de faire appel à votre expertise .

Ci contre le lien de la page http://www.minibulle.net/bookv1/accueil_book.html
Et le modèle en jpg : http://www.minibulle.net/bookv1/portfolio_v1_decoupage.jpg

Je cherche désespérément à centrer/justifier le texte du menu, comme sur mon modèle. Il y a peut être des incohérences dans mon code qui empêchent un text-justify, j'ai essayé pleins de chose mais néant.
2- RESOLU

* ------------------ Menu ----------------------------------------------------------------------------*/

.menuhaut {

list-style-type: none;

margin-top:0;

margin-left: 221px;

padding:0;

background-image:url(images/nav_bar_test.png);

width: 693px;

height: 38px;

}

.menuhaut li {

display: inline;

float: left;

padding-top: 22px;

}

#rub1{

border-left-width:15px;

border-left-style:solid;

border-color:#0690f0;

padding-left:3px;

}

#rub2{

border-left-width:15px;

border-left-style:solid;

border-color:#3ade32;

padding-left:3px;

}

#rub3{

border-left-width:15px;

border-left-style:solid;

border-color:#d91b5c;

padding-left:3px;

}

#rub4{

border-left-width:15px;

border-left-style:solid;

border-color:#f1e418;

padding-left:3px;

}

#rub5{

border-left-width:15px;

border-left-style:solid;

border-color:#f1ac18;

padding-left:3px;

}



.menuhaut a {

padding-left:0px; 

padding-right:15px;

margin-right: 20px;

color: #ffffff;

text-decoration: none;

background: url(images/puce_menu0.png) center right no-repeat;

display:block !important;

}

.menuhaut a:hover {

color:#000000;

background-image: url(images/puce_menu.png);

}

Modifié par Minibulle (06 Oct 2008 - 13:28)

Bon j'ai résolue le point 2, j'ai réussi à placer le texte a la droite de l'image en créant un container contenant l'image (en float left ) suivi de la légende à côté.
Pour jouer sur les styles de la légende, j'ai crée une class "date". Lorsque je l'attribut a la première image, tout est OK que ce soit sur FF ou IE.

Par contre quand je l'applique aux deux autres images, sur FF le margin-top n'est pas pris en compte et sur IE c'est pris en compte mais complètement décalé.
Du coup, j'ai pensé faire un id="date" pour chaque légendes. Dans FF ça marche, mais dans IE c'est toujours aussi décalé .

/* ------------------ centre accueil ----------------------------------------------------------------------------*/

#accueil{
padding-top: 15px;
}
p.news1{
float:left;
margin-right:20px;
margin-top: 40px;
margin-bottom: 0px;
padding-bottom: 0px;
}
p.news2{
float:left;
margin-right:20px;
margin-top: 5px;
margin-bottom: 0px;
padding-bottom: 0px;
}
p.news3{
float:left;
margin-right:20px;
margin-top: 5px;
margin-bottom: 0px;
padding-bottom: 0px;
}
img{
border-width: 1px;
border-style:solid;
border-color: #0690f0;
}
/* -----------------legende avec class -------------------------------*/
/*p.date{
margin-top: 55px;
color:#0690f0;
font-weight:bold;*/

/*--------------- legende avec id ---------------------*/
#date1{
margin-top: 55px;
color:#0690f0;
font-weight:bold;
}
#date2{
margin-top: 70px;
color:#0690f0;
font-weight:bold;
}
#date3{
margin-top: 75px;
color:#0690f0;
font-weight:bold;
}

Par contre pour le menu, je n'ai pas réussi a remonter le texte...

Une piste svp? je me sens seule sur mon post

Bonjour,

Je ne sais pas si ton post est toujours d'actualité.
Si c'est le cas, une solution consiste à utiliser l'attribut vertical-align de CSS. Cela ne fonctionne que dans un tableau :

<table>
  <tr>
     <td style="border:1px solid black; width:200px; height:200px; text-align:center; vertical-align:middle;">
        Le contenu de mon texte qui peut être aussi long que je le souhaite et se centre automatiquement en X et en Y.
     </td>
  </tr>
</table>

Testé sur IE7 et FF3 : no problemo.

Un petit conseil ; change la couleur de ton lien lors du focus, le noir sur fond gris est plutôt invisible. Essaie la même couleur que l'initiale .

Bon courage pour ton projet.

a écrit :
Patience et longueur de temps font plus que force ni que rage.