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 Mouns (site web personnel) . Évalué à 1.
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 . Évalué à 1.
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 à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.