28172 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

Alors sûrement que la question a déjà été abordé, mais je n'arrive pas à trouver de sujet similaire (que ce soit ici ou sur le net !), il y a déjà tellement de problème différents avec ie et les floats !
Je vais tenter d'être le plus clair possible, ce n'est pas gagner !


2 images d'exemple :

Sous Internet explorer 8 (Pas bien !)
upload/19440-exempleie.gif

Sous Opera (même rendu sous firefox) (bien !)
upload/19440-exemple2.gif



<ul>
    <li>
        <label><strong>Personnes proposant le cr&eacute;dit</strong></label>
    </li>
    <li>
        <label>Qui propose le cr&eacute;dit sur le point de vente ?*</label>
    </li>
    <li class="autres">
         <span><input type="checkbox" /><label>Vendeur</label></span>
         <span><input type="checkbox" /><label>H&ocirc;tesse de caisse</label></span>
         <span><input type="checkbox" /><label>Assistant/secr&eacute;taire</label></span>
         <span><input type="checkbox" /><label>Responsable vendeurs</label></span>
         <span><input type="checkbox" /><label>H&ocirc;tesse de caisse centrale</label></span>
         <span><input type="checkbox" /><label>G&eacute;rant</label></span>
         <span><input type="checkbox" /><label>Responsable</label></span>
         <span><input type="checkbox" /><label>Comptable</label></span>
         <span><input type="checkbox" /><label>Autre</label><input type="text" class="inputText" style="width:188px; margin-left:5px;"/></span>
    </li>
</ul>
  
        <div class="clear"></div>



#container form LI.autres SPAN{
				width: 250px;
				display:block;
				float: left;
			}
.clear{ clear: both; }



Donc ie ne gère pas les float de la même façon, j'ai l'impression qu'il agit comme si les éléments en float continuaient sur la droite, comme si tout tenait sur une ligne en gros.
Même avec le clear:both ! (et même avec clear:left; clear:right;)

Du coup j'ai beaucoup de problème pour avoir le même rendu sur les différents navigateurs, dois-je forcément utilisé des styles conditionnels ?

Est-ce un problème fréquent ?
Enfin bref au secours ! Ce n'est pas la première fois que je rencontre ce problème et je n'ai plus beaucoup de cheveux à m'arracher !

Merci d'avance pour votre aide,
Fabious
Modifié par Fabious (13 May 2009 - 11:45)
Salut,

Tu devrais mettre ta partie basse (informations obligatoires et les boutons) dans un autre div et tu positionnes avec margin-top et margin-left. Pour avoir le même rendu sur les 2 navigateurs, ce n'est pas toujours chose évidente, malheureusement.

Je n'ai pas de solution miracle Smiley biggrin
Salut,

Tu devrais mettre ta partie basse (informations obligatoires et les boutons) dans un autre div et tu positionnes avec margin-top et margin-left. Pour avoir le même rendu sur les 2 navigateurs, ce n'est pas toujours chose évidente, malheureusement.

Je n'ai pas de solution miracle Smiley biggrin

Oups double post un modérateur pourrait le supprimer svp?

Merci Smiley smile

Modifié par Ines (13 May 2009 - 11:55)
Merci pour ta réponse,

Le problème c'est que j'ai monté la page comme ca! (oublié de mettre cette partie du code Smiley lol )

J'ai ma partie basse isolé dans une div footer, avec un margin-top:30px;



On peut le voir sur mes screen, le margin-top:30px; s'effectue selon la dernière ligne sur les navigateurs SAUF internet explorer, dont le margin-top:30px; se base sur la première ligne comme si les 2 dernières lignes n'existaient pas, et que tout les élements tenaient sur 1 seule ligne !
Ok je vois.

Tu as géré comment le css des 2 navigateurs? Car ce que moi je fais c'est 2 CSS : un pour firefox, opera, safari, ... et un pour ie. Si tu as procédé comme ça, tu changes juste le margin-top du css de ie.
Un seul css pour ma part.

Je vais devoir faire des css séparés Smiley cligne

C'est juste que c'est le seul problème que j'ai sur ma page, je trouvais ca dommage de faire une condition pour ie rien que pour ca! RRaahhh merci microsoft comme d'hab ! Smiley bawling


(si quelqu'un aune solution pour corriger ce problème je reste preneur ! Smiley cligne )
Ce n'est pas la seule solution, c'est la seule que j'ai trouvée !

Il y a surement moyen de faire ça plus proprement et plus rapidement, attend d'avoir d'autres avis Smiley smile je ne suis que débutante en la matière Smiley lol

Bon courage en tout cas Smiley cligne