smile Posté 10 Septembre 2007 Posté 10 Septembre 2007 Bonjour, Pour faire deux colonnes ou plus, il m'arrive d'utiliser le float exemple : <div style="width:200px;"><div style="float:left;width:100px;">colonne 1</div><div style="float:right;width:100px;">colonne 2</div></div> Le problème arrive sur certains navigateurs firefox pourtant récents qui décalent la colonne de droite en dessous de la gauche, y'a t-il une astuce pour que cela reste toujours fixé ? Merci
captain_torche Posté 10 Septembre 2007 Posté 10 Septembre 2007 Le problème doit venir de tes déclarations de taille. Essaye en diminuant la largeur de tes colonnes pour tester. Par défaut (sans doctype), Firefox utilise le mode de rendu W3C : c'est à dire que la taille d'un élément est sa taille définie + sa taille de padding. Dans les mêmes conditions, Internet Explorer rend les éléments différemment : le padding n'est pas ajouté à la taille d'un élément. Pour que les navigateurs se comportent de façon identique, un doctype valide devrait être un bon début (et force le mode de rendu W3C pour IE)
dldstyle Posté 10 Septembre 2007 Posté 10 Septembre 2007 Tout comme captain_torche, j'opterai pour la déclaration de taille dans ton cas. Ce n'est pas la question directe, mais c'est en rapport avec les floaf:left sous IE. Avec plusieurs blocs en float left et un margin-left sur le premier, IE double cette marge. Pour corriger ce bug, il suffut de rajouter un display:inline; Ex: .premier_bloc {float:left;width:100px;margin-left:10px; /* IE en fera une marge de 20px */display:inline; /* avec cette propriété, tout rentrera dans l'ordre */}.second_bloc {float:left;width:100px;}
smile Posté 10 Septembre 2007 Auteur Posté 10 Septembre 2007 Je n'ai pas de problèmes avec ie mais avec certains firefox, j'ai une déclaration comme suit : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
smile Posté 10 Septembre 2007 Auteur Posté 10 Septembre 2007 Merci Dldstyle, en effet le display:inline apparement rectifie le bug, j'ai rajouté ceci : float:left;width:100px;display:table-cell;display:inline-table; display:inline-block;
smile Posté 10 Septembre 2007 Auteur Posté 10 Septembre 2007 Testé sur Mozilla 1.7.12 , Netscape 7.2, Netscape 9.0b2, Opera 8.5.0, Opera 9.21, Safari 1.2, Explorer 5.2, Firefox 3.0a6 ... C'est good
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant