IE != Firefox css/liens/button

Bonjour,

Comme d’habitude, il faut qu’il y ai une différence entre firefox et IE!!! la loose!!!
cette fois ci, ça concerne des boutons… sous firefox j’ai :

<td align=""center"" valign=""top""><span class=""TitreSaisie""><br><br>Centre de Solutions </span>"
	sIdentification = sIdentification &	"	<br><a href=""[http://ozerzerzerzer.com]"" target=""_blank"" ><input type=""button"" class=""HPBouton"" value=""s'identifier""></a><br>"
	sIdentification = sIdentification &	"	 <a href=""../Users/NewUser.asp""><input type=""button"" class=""HPBouton"" value=""s'inscrire""></a>"
	sIdentification = sIdentification &	"	</td>"

nickel les liens passent, les boutons sont à la dimension voulue, tout va bien… sauf que sur IE … les liens ne passent pas… je décide alors de faire :

<td align=""center"" valign=""top""><span class=""TitreSaisie""><br><br>Centre de Solutions Orchestra</span>"
	sIdentification = sIdentification &	"	<br><a href=""[http://orchestra.vous-ecoute.com/?fconx=1]"" target=""_blank"" class=""HPBouton"">s'identifier</a><br>"
	sIdentification = sIdentification &	"	 <a href=""../Users/NewUser.asp"" class=""HPBouton"" >s'inscrire</a>"
	sIdentification = sIdentification &	"	</td>"

Sur IE nickel, bon affichage, les liens passent, mais sur firefox, l’affichage des boutons n’est pas celui attendu, n’est pas le mêm eque IE…
quelqu’un aurait une idée pour remédier à cette différence???
ma classe HPButon correspond à :


.HPBouton
{
	FONT-SIZE: 10px;
	WIDTH: 120px;
	COLOR: #28166F;
	BACKGROUND-COLOR: #FFEAD8;
	TEXT-ALIGN: center;
	BORDER: #999999 1px solid;
	PADDING-TOP: 1px;
	PADDING-BOTTOM: 2px;
	PADDING-RIGHT: 5px;
	PADDING-LEFT: 5px;	
	background-position: center center;
	vertical-align: middle;
	float : none;
}

voilà, merci d’avance pour votre aide…
Edité le 02/09/2009 à 09:57

est-ce possible que celà viennent d’une vieille version d’IE??? j’ai la evrsion 6 apparement, et étant sous window 2000 je ne peux pas faire de mise à niveau de IE…si quelqu’un peut tester avec sa version d’IE au cas où???

Tout d’abord, c’est un problème CSS. Donc si tu pouvais publier du code HTML plutot que du code serveur, ca facilierait la lisibilité.

Et c’est parce que tu fais des trucs un peu bizarres aussi … Le padding se définit comme étant l’espace d’un conteneur. Or un lien n’est pas un conteneur ! Donc il est fort probable que les navigateurs aient du mal à rendre correctement ton lien, et qu’il s’agisse de IE6, IE7, Safari, Opéra ou Firefox.

Essaie plutot de retirer de .HPBouton tout ce qui concerne le padding et l’alignement, et de les déplacer dans un tag HTML div.

Autre remarque : le span a été concu pour n’y contenir que du texte, à l’instar du div. Donc les tags br devraient etre à l’extérieur d’un span.

Edit : et enfin, c’est pas systématiquement la faute des navigateurs … meme si IE contient le plus de spécificités.
Edité le 01/09/2009 à 11:19

tester sous firefox safari IE6, il n’y a que IE6 qui ne permet pas le lien

<a href=""../Users/NewUser.asp"" ><input type=""button"" class=""HPBouton"" value=""s'inscrire""></a>

même après avoir virer les padding.

le code la page _loggin.asp:


<%
'Affiche l'utilisateur connecté si le cookies existe
if Request.Cookies("UserName") <> "" and Request.Cookies("Pseudo") <> "" and Request.Cookies("PassWord") <> "" and Request.Cookies("Client") <> "" and Request.Cookies("Revendeur") <> "" then
	sUser = Request.Cookies("UserName")
	Session("Pseudo") = Request.Cookies("Pseudo")
	Session("PassWord") = Request.Cookies("PassWord")
	Session("Client") = Request.Cookies("Client")
	Session("Revendeur") = Request.Cookies("Revendeur")
	sIdentification = "<table width=""125"" border=""0"" align=""center"" cellpadding=""0"" cellspacing=""0"" class=""News"">"
	sIdentification = sIdentification & "  <tr>"
	sIdentification = sIdentification & "    <td align=""center"" valign=""top"">"
	sIdentification = sIdentification & "		<span class=""TitreSaisie"">Bonjour,<br>" & sUser & "</span><br><span class=""TexteSaisie"">Ce n'est pas vous ?</span>"
	sIdentification = sIdentification &	"	<br><a href=""http://orchestra.vous-ecoute.com/?fconx=1"" target=""_blank"" class=""HPBouton"">S'identifier</a>"
	sIdentification = sIdentification &	"	</td>"
	sIdentification = sIdentification &	"  </tr>"
	sIdentification = sIdentification & "</Table>"
else
	sUser = ""
	sIdentification = "<table width=""125"" border=""0"" align=""center"" cellpadding=""0"" cellspacing=""0"" class=""News"">"
	sIdentification = sIdentification & "  <tr>"
	sIdentification = sIdentification & "    <td align=""center"" valign=""top""><span class=""TitreSaisie""><br><br>Centre de Solutions Orchestra<br></span>"
	sIdentification = sIdentification &	"	<a href=""http://orchestra.vous-ecoute.com/?fconx=1"" target=""_blank"" class=""HPBouton"">s'identifier</a><br>"
	sIdentification = sIdentification &	"	 <a href=""../Users/NewUser.asp"" ><input type=""button"" class=""HPBouton"" value=""s'inscrire""></a>"
	sIdentification = sIdentification &	"	</td>"
	sIdentification = sIdentification &	"  </tr>"
	sIdentification = sIdentification & "</Table>"
end if

'Identification Utilisateur'
	bClient=Session("Client")
	bRevendeur=Session("Revendeur")
	'sCookies = " c: " & Session("Client") & " r: " & Session("Revendeur")'
%>

appliqué sur mon template deltavox.dwt

...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <TD width="100%" height="130" valign="top" class="MenuG"></TD>
            <!-- Le menu est dans cette cellule -->
		</tr>
        <tr> 
          <TD width="100%"> <% [b]response.write(sIdentification)[/b] %>
          </TD>
        </tr>
        <tr> 
          <TD width="100%"> 
            <!--#INCLUDE FILE="../DBClients/_SaisieEmail.asp"-->
          </TD>
        </tr>
		<tr> 
          <TD width="100%"> 
            <!--#INCLUDE FILE="../Templates/_Info.asp"-->
          </TD>
        </tr>
		<tr> 
          <TD width="100%"> 
            <!--#INCLUDE FILE="../Templates/_Info2.asp"-->
          </TD>
        </tr>
		<tr>
		  <TD width="100%"> 
            <!--#INCLUDE FILE="../Templates/_Deltavox.asp"-->
          </TD>
        </tr>
      </table>

je suis d’accord, mais là pour le coup, ayant un soucis qu’avec IE, je ne comprends pas d’où ça peut venir… enfin bref, même si c’est la faute des navigateurs, je vois pas comment remédier à mon affichage et au liens.


est-ce que ça peut venir de :
.HPBouton:Hover {
	background-color: #28166F;
	text-decoration : none;
	color : #FFFFFF;
	BORDER: #CCCCCC 1px solid;
}

???

En fait, c’est un peu le bordel là …
Est ce que tu peux publier :

  • un screen shot de l’écran OK sous FF
  • un screen shot de ce meme écran sous IE et donc ce qui ne va pas
  • expliquer en qqs mots ce que tu entends par l’affichage des boutons n’est pas celui attendu

Et si possible que du code HTML, pas de PHP ou Java ou autre. Quand tu testes sur le navigateur, c’est le code source HTML de celui ci qui interesse, pas ce que tu as écrit coté serveur. Merci.

Heu :

<a href=""…/Users/NewUser.asp"" ><input type="“button”" class="“HPBouton”" value="“s’inscrire”">

What the fuck ?

Tu fous un bouton type input dans un lien ? Et tu t’étonnes que cela déconne ?

La vérité c’est que ce n’est pas valide : un bouton n’a de place que dans un formulaire.

Si tu essayes :

Il y a déjà plus de chances que cela soit valide.

Et si tu veux vraiment transformer un lien en simili bouton, alors tu n’as pas 36 choix : tu utilises CSS pour transformer ton lien en simili bouton.

[edit] et pareil que vitamin : affiche le code source dans IE, et envoie nous le. Là, c’est clairement un problème avec le HTML que tu génères. Résout le sans la partie serveur, et corrige là après.
Edité le 01/09/2009 à 13:12

j’ai testé


<td align="center" valign="top"><span class="TitreSaisie"><br><br>Centre de Solutions Orchestra</span>	<br>
						<form action="http://orchestra.vous-ecoute.com/?fconx=1" method="post" target="_blank"> 
							<input type="button" class="HPBouton" value="s'identifier">
						</form>
						<form action="../Users/NewUser.asp" method="post">
							<input type="button" class="HPBouton" value="s'inscrire">
						</form>
						</td>

mais les liens ne se chargent pas…
Edité le 01/09/2009 à 14:56

sur IE:


     <table width="125" border="0" align="center" cellpadding="0" cellspacing="0" class="News">  
          <tr>    
               <td align="center" valign="top">
                    <span class="TitreSaisie"><br><br>Centre de Solutions Orchestra<br></span>	
                    <a href="http://orchestra.vous-ecoute.com/?fconx=1" target="_blank"><input type="button" class="HPBouton" value="s'identifier"></a>	 
                    <a href="../Users/NewUser.asp" ><input type="button" class="HPBouton" value="s'inscrire"></a>	
               </td>  
          </tr>
     </Table>

les liens ne sont pas chargé

j’essaie avec les form même probleme,

je n’ai aucun probleme lorsque je fais:


<TD width="100%"> 
     <table width="125" border="0" align="center" cellpadding="0" cellspacing="0" class="News">  
          <tr>    
               <td align="center" valign="top">
                    <span class="TitreSaisie"><br><br>Centre de Solutions Orchestra<br></span>	
                    <a href="http://orchestra.vous-ecoute.com/?fconx=1" target="_blank" class="HPBouton">s'identifier</a>	 
                    <a href="../Users/NewUser.asp" class="HPBouton" >s'inscrire</a>	
              </td>  
         </tr>
     </Table>
</TD>

sous IE, mais sous firefox, les liens sont chargé correctement, mais au niveau du visuel, c’est différent que sous IE, et les boutons se superposent en quelque sorte…
je rappelle mon CSS

.HPBouton
{
	FONT-SIZE: 10px;
	WIDTH: 120px;
	COLOR: #28166F;
	BACKGROUND-COLOR: #FFEAD8;
	TEXT-ALIGN: center;
	BORDER: #999999 1px solid;
	background-position: center center;
	vertical-align: middle;
	float : none;
}

.HPBouton:Hover {
	background-color: #28166F;
	text-decoration : none;
	color : #FFFFFF;
	BORDER: #CCCCCC 1px solid;
}

Sans screenshot, pas de réponse. Personne ne peut comprendre ce que tu peux dire par “c’est différent”, donc tant pis, jlaisse tomber.

<table><tr><td class="hp">
 <span>Centre de Solutions Orchestra</span>
 <a href="http://www.google.fr" target="_blank">s'identifier</a>	 
 <a href="http://www.clubic.com">s'inscrire</a>	
 </td></tr></table>

Ca, ca marche à 200% sous IE, FF, Opera, Safari : les liens s’affichent et quand on clique dessus, ca charge les cibles.

Ci-dessous, les classes à remplir pour ton visuel :

.hp {
  // taille de la cellule, espacements, fond
}

.hp span {
  // le titre "Centre de solutions Orchestra"
}

.hp a {
 // les deux liens
}

Voilà, tu pars de ca et tu mets tes styles les uns apres les autres jusqu’à que ca ne donne plus ce que tu attends.

j’arrive pas à faire les screenshot…enfin, j’ai mes images, mais il faut que je les charge quelque part pur les afficher sur le forum, je n epeux pas le charger directement de mon ordi…
Edité le 01/09/2009 à 17:54

imageshack.us… ?

ok merci, donc voilà l’affichage sous firefox :

[Photo supprimée]

sous safari :

[Photo supprimée]

et celle sous IE :

[Photo supprimée]

et celle que je veux préserver c’est celle de IE que j’ai avec le code :


<TD width="100%"> 
     <table width="125" border="0" align="center" cellpadding="0" cellspacing="0" class="News"> 
          <tr>    
                 <td align="center" valign="top">
                         <span class="TitreSaisie"><br><br>Centre de Solutions Orchestra<br></span>	
                         <a href="http://orchestra.vous-ecoute.com/?fconx=1" target="_blank" class="HPBouton">s'identifier</a>	
                         <a href="../Users/NewUser.asp" class="HPBouton" >s'inscrire</a>	
                 </td>  
          </tr>
      </Table>
</TD>

avec comme CSS :


.HPBouton
{
	FONT-SIZE: 10px;
	WIDTH: 120px;
	COLOR: #28166F;
	BACKGROUND-COLOR: #FFEAD8;
	TEXT-ALIGN: center;
	BORDER: #999999 1px solid;
	background-position: center center;
	vertical-align: middle;
	float : none;
}

.HPBouton:Hover {
	background-color: #28166F;
	text-decoration : none;
	color : #FFFFFF;
	BORDER: #CCCCCC 1px solid;
}

donc pourquoi y a t’il un problème d’affichage???
Edité le 02/09/2009 à 09:39

Parce qu’un élément inline (comme le sont tous les liens, span, etc) n’a pas de taille définie. Si tu essayes display: block dans ta classe, tu verras que cela évoluera.

pfffffffffffffffffffffffffffffffff … honte à moi!!! tout ça, pour ça!!!
comment se sentir ridicule à cause d’une pauvre ligne CSS…

Merci, problème résolue…et humiliation totale…lol

Ne jamais se sentir comme tel ! Ca arrive à tout le monde de faire des bourdes, quelles qu’elles soient.