Une même class pour deux résultats différents

Bonjour à tous,

Je pensais que les css donnait le même résultat sur les navigateurs IE et Netscape ou Mozilla. En parcourant les différents Post de ce forum je me rend compte que non loin de là !

J'ai une différence d'affichage pour mes boutons. Le résultat sur IE me convient , alors que Netsc. et Firefox non.

Comment je peux faire pour avoir le même résultat ? Y as t-il de grosse erreurs dans mon code ?

Code html :

<a href="newsletter/newsletter.htm" class="bouton">S'inscrire à notre newsletter</a>

Code css :

a.bouton {
  color: #330033;
  background-color: #FFCC00;
  text-decoration: none;
  text-align: center;
  padding: 5px;
  border: 2px outset #white;
  font-weight:bold;
  font-family: Arial,Verdana,Helvetica;
  font-size: 11px;
}

a.bouton:hover {
  color: #330033;
  background-color: #FFCC00;
  border: 2px inset #black;
  font-family: Arial,Verdana,Helvetica;
  font-size: 11px;
}

Merci d'avance pour votre aide

diabolo

salut

les couleurs #white et #black n'existent pas. Enlève les #.

++

Salut,

Même en utilisant les codes ffffff pour white et 000000 pour black le resultat ne fonctionne que sous IE.

J'ai également un problème de positionnement sous IE mon bouton est bien centrer (verticalment) dans mon bandeau mais sous Netsc non !

diabolo

Salut diabolo,

Un petit complément au message de clb56 : le caractère "#" ne précède que les couleurs exprimées en hexadécimal, au format RGB (Rouge-Vert-Bleu). Lien utile : la page du W3C concernant les différentes manières de nommer les couleurs en CSS.

Un exemple pour la couleur blanche :
* #FFFFFF ou #FFF // hexadécimal #RRGGBB et #RGB
* "white" tout simplement
* rgb(255,255,255)
* rgb(100%, 100%, 100%)

Bonne continuation

En effet

Et pour simplifier un peu ce code inutilement redondant, tu n'as besoin de conserver dans a.bouton:hover {...} que la seule propriété que tu souhaites apparemment modifer au survol : border: 2px inset #000; (#000 signifie "black").

D'autre part, tu dois toujours indiquer en fin de liste des polices de caractères une police générique, afin que le navigateur puisse faire un choix plus adapté si toutes tes polices sont absentes chez le visiteur : font-family: Arial,Verdana,Helvetica,[b]sans-serif;[/i]

diabolo6771 a écrit :

J'ai également un problème de positionnement sous IE mon bouton est bien centrer (verticalment) dans mon bandeau mais sous Netsc non !

Il est où ton bandeau ?

je viens de tester avec white et black (sans les #) et il n'y a aucun problème avec firefox

Ok effectivement en écrivant ceci j'ai plus de problème d'aspect sous firefox ou Netsc.

a.bouton {
  color: #330033;
  background-color: #FFCC00;
  text-decoration: none;
  text-align: center;
  padding: 5px;
  border: 2px outset white;
  font-weight:bold;
  font-family: Arial,Verdana,Helvetica;
  font-size: 11px;
}

a.bouton:hover {
  /*color: #330033;
  border: 2px inset black;
  font-family: Arial,Verdana,Helvetica;
  font-size: 11px; */
  background-color: #FFCC00;

}

Pour le positionnement j'ai crée un bandeau vert sur lequel se trouve se bouton. Je vous donne le code css de ce bandeau :

.bandeau_vert {
 position:absolute;
 left:178px;
 top:119px;
 width:797px;
 height:35px;
 z-index:1;
 background-color:#99cc99;
 layer-background-color:#99cc99;
 border: solid 2px #999999;
}

Ensuite j'ai crée une class "newsletter" qui devait me permettre de positionner mon bouton sur mon bandeau . Voici le code css de cette class. Je pense que mon erreur est dans cette partie du code !

.newsletter {
 position:absolute;
 left:199px;
 top:125px;
 width:400px;
 height:32px;
 z-index:2;
}

Le resultat du positionnement est différent entre IE et Netsc.

diabolo

Zut j'ai écrit une bétise !!

Voila le bon code pour les boutons l'aspect est correct.

[code]a.bouton {
  color: #330033;
  background-color: #FFCC00;
  text-decoration: none;
  text-align: center;
  padding: 5px;
  border: 2px outset white;
  font-weight:bold;
  font-family: Arial,Verdana,Helvetica;
  font-size: 11px;
}

a.bouton:hover {
   border: 2px inset black;
 
}

diabolo

à 1ère vue c'est un peu bizarre ton affaire,

l'élément qui a la classe bandeau vert, il contient quoi ? Dans le code source hein, pas dans le rendu à l'écran.

une suggestion quand tu donnes une css indique également le code html auquel elle s'applique.

Ok je vais essayer d'etre plus clair.

L'élement bandeau vert n'est qu'un simple rectangle vert vide.

Sur lequel j'ai placé le bouton qui me pose problème à l'aide d'une div nommé "newsletter". Le bandeau à une hauteur de 36px et le bouton 32 ce qui devrai me laisser 2 px en haut et en bas du bouton.

Sous IE j'ai bien ce résultat, alors que sous Firefox le bouton est placé tout en haut du bandeau vert. Le bouton n'est pas inclu dans le bandeau mais dessus.

<div id="bandeau_vert" class="bandeau_vert"></div>
<div id="newsletter" class="newsletter">
<a href="newsletter/newsletter.htm" class="bouton">S'inscrire à notre newsletter</a>
</div>

diabolo

le problème pour t'aider c'est qu'on navigue à vue dans le brouillard

pourquoi n'a tu pas coder ton html

<div id="bandeau_vert" class="bandeau_vert">
<div id="newsletter" class="newsletter">
<a href="newsletter/newsletter.htm" class="bouton">S'inscrire à notre newsletter</a>
</div>
</div>

ou encore plus simplement

<div id="newsletter" class="newsletter bandeau_vert">
<a href="newsletter/newsletter.htm" class="bouton">S'inscrire à notre newsletter</a>
</div>

a écrit :

<div id="bandeau_vert" class="bandeau_vert">
<div id="newsletter" class="newsletter">
<a href="newsletter/newsletter.htm" class="bouton">S'inscrire à notre newsletter</a>
</div>
</div>

En utilisant ce code mon bouton se retrouve totalement ailleurs. Il faut donc que je retouche le code css pour le repositionner.

diabolo

diabolo6771 a écrit :


En utilisant ce code mon bouton se retrouve totalement ailleurs. Il faut donc que je retouche le code css pour le repositionner.

c'est justement à ça que servent les css, obtenir le résultat que l'on souhaite avec un codage html établi de manière rigoureuse.
Modifié par clb56 (22 Jul 2005 - 14:24)