Retourner aux forums || Retourner au forum Programmation.web
Programmation.web : Corriger un bug CSS sur msie.
Posté par Narmer () le 31 août 2004Je cherche à avoir une mise en page ou j'ai un titre en float à gauche dans une colonne et la liste des items sur la colonne de droite.
Voici le comportement que j'attends (firefox)
- http://ejemba.free.fr/bugie-mozilla.png(...)
Voici le comportement qui m'embete (msie)
- http://ejemba.free.fr/bugie-internetexplorer.png(...)
Sur msie mes items sont toujours un petit peu décalés ce qui tue la mise en page. Ai je loupé un épisode avec les hacks ie.
Le pb se situe au niveau de div.subsection et de div.item1 .
Le code je l'ai mis aussi à cette url http://ejemba.free.fr/bugie.html(...) car j'arrive pas le mettre correctement dans mon message
- - - - - - - -8< (snip!) - - - - - - - - - - - - - - - - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd(...)">
<html xmlns="http://www.w3.org/1999/xhtml(...)" lang="fr" xml:lang="fr">
Skandia Chrono
body {
margin: 1em;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 76%;
text-align: left;
}
#page {
border: 1px solid black;
color: black;
background: #efefef;
margin: 0 0 1em 0;
padding: 0em;
width: 531px;
}
div.section {
padding: 0 0 1em 0;
}
div.subsection {
float: left;
width: 7em;
padding: 0;
margin: 0;
}
div.item1 {
margin: 0 0 1em 15em;
padding: 0 0 0 0;
border: 0 0 0 0;
}
TITRE PAGE
Titre section
Sous section 1
item 1 <!-- item1 la est en retrait par rapport aux autres -->
item 2
item 3
Sous section 2
item 1 <!-- item1 la est en retrait par rapport aux autres -->
item 2
item 3
> Lire le message (2 commentaires, moyenne: 1).
bug CSS IE
deja, mettre 14 lettres dans 7em ... ca fait un peu leger ... ce qui doit avoir un effet avec certains navigateurs ...
sinon melanger des em dans des px ... c bof
sinon il y a "clear:" avec lequel tu peux jouer quand tu fais des float . "clear:" permet de dire qu'un paragraphe flottant deborde sur les paragraphes suivant. ainsi tu peux fixer la hauteur du paragraphe flottant, et constater les autres effets. attention float+clear est plein d'effets de bord rigolo ( si on aime ce genre de truc ).
un truc bien esy de mettre des couleurs de fond a tes box pour debugger : ca permettra de voir le pourquoi du comment.
les magin+padding+border remplacer ca par des border avec des border-color .... c pas mal non plus. genre ( adapte a ta sauce ) :
* {
border-width: 2px !important;
border-color: Pink !important;
border-style: solid !important;
background-color: Yellow !important; }
-
[^]Re: bug CSS IE
Posté par Narmer () le 31/08/2004 à 22:49. (lien). Évalué à 1.Oui je débute en CSS :S d'ou les erreurs. Je vais faire plus attention pour voir si effectivement je n'ai pas d'effet de bord. C'est bien de coder en sachant ce qu'on fait :) :) je suis d'accord avec toi ...
Demain je teste sous msie au boulot (bicose gnu/linux @ home).
Je regarderai le "clear:" merci pour le tuyau du debuggage.
@+
Revenir en haut de page || Retourner aux forums || Retourner au forum Programmation.web
Cette page a été générée par Templeet en 0.0444s (dont 0.0057 de SQL).
Cette page est peut-être conforme xhtml 1.0.
Information sur le site.
Cette discussion est archivée, il n'est plus possible de laisser des commentaires.
Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.