Forum Programmation.web Corriger un bug CSS sur msie.

Posté par .
Tags : aucun
1
31
août
2004
Bonjour,

Je 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





  • # bug CSS IE

    Posté par (page perso) . Évalué à 1.

    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 . É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.

      @+

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.