28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

tout dabord, mon code pour comprendre...

<div class="LigneTab">
<table class="blocOr">
	<tr>
	 <td class="top">

	 </td>
	</tr>
	<tr>
	 <td class="bottom">
		<input type="button" name="ok" value="Je m'inscris" onclick="" />
	 </td>
	</tr>
 </table>
 <table class="blocOr" >
  <tr>
	 <td class="top">
	 </td>
	</tr>
	<tr>
	 <td class="bottom">
		Prix EUR (dès le 1 janvier 2006) <br />
		<input type="button" name="ok" value="Je m'inscris" onclick="" />
	 </td>
	</tr>
 </table>
 <table class="blocOr">
	<tr>
	 <td class="top">
	 </td>
	</tr>
	<tr>
	 <td class="bottom">
		<!-- ligne du bas -->
		Prix EUR TTC <br />
		<input type="button" name="ok" value="Je m'inscris" onclick="" />
		</td>
	</tr>
 </table>
</div>
<div class="LigneTab">
 <table class="blocBl">
	<tr>
	 <td class="top">
	 </td>
	</tr>
	<tr>
	 <td class="bottom">
	 </td>
	</tr>
 </table>
</div>


Voila pour l'html, maintenant, CSS

div.LigneTab {
width:800px;
margin:0;
padding:0;
clear:both;
}

table.blocOr {
width:240px;
margin:0 20px 0 0;
padding:1px;
background-color:#FF6600;
float:left;
}

table.blocOr td.top {
background-color:#FF6600;
height:120px;
vertical-align:text-top;
}

table.blocOr td.bottom {
background-color:#DDDDDD;
padding:5px;
margin:0;
height:100px;
text-align:center;
}

table.blocBl {
width:240px;
margin:20px 20px 0 0;
padding:1px;
background-color:#309BFF;
float:right;
}

table.blocBl td.top {
background-color:#309BFF;
height:50px;
vertical-align:text-top;
}

table.blocBl td.bottom {
background-color:#DDDDDD;
padding:5px;
margin:0;
height:100px;
text-align:center;
}


Le pb maintenant, sous firefox, tous fonctionne trés bien, tous mes blocs sont correctements aligné, les boutons à l'intérieur sont à leur place, bref tout va bien. Mais sous IE, le bouton du troisième bloc à droite sur la première ligne se fait la male sous le deuxième bloc ! et lorsque que l'on selectionne n'importe quoi avec la souris, il revient à sa place !

Pour ma part c'est incompréhensible, mon code me semble correcte, et ce bouton qui se déplace sous IE... Smiley biggol

Voila si quelqu'un à une idée
PS : les tableaux sont utiles j'ai juste vidé leur contenu qui est privé Smiley smile )

EDIT : si je change le float:left pour un float:right, et bien le problème se deplace au bloc de gauche...
float et table ne feraient-ils pas bon ménage sous IE ?

EDIT2 : j'avance dans ma quète de reponses, si je passe la largeur de div.LigneTab à 803 pixels, le problème de sortie de mon bouton est résolue, mais le bloc d'en dessous se décal un peu (forcément). D'ou vient se décalage, inexistant sous firefox ?
Modifié par MrGingle (21 Oct 2005 - 12:43)