smile Posté 10 Septembre 2007 Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 10 Septembre 2007 Partager 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) Lien vers le commentaire Partager sur d’autres sites More sharing options...
dldstyle Posté 10 Septembre 2007 Partager 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;} Lien vers le commentaire Partager sur d’autres sites More sharing options...
smile Posté 10 Septembre 2007 Auteur Partager 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" > Lien vers le commentaire Partager sur d’autres sites More sharing options...
smile Posté 10 Septembre 2007 Auteur Partager 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; Lien vers le commentaire Partager sur d’autres sites More sharing options...
smile Posté 10 Septembre 2007 Auteur Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant