28220 sujets

CSS et mise en forme, CSS3

[ Résolu ] Problème sous IE : colonne centrale qui descend.

Voilà.. J'été toute contente d'avoir créé un site qui fonctionnait bien (sous FireFox) mais lorsque j'ai ouvert la page ac IE.. Voyez par vous même:

http://nintendoisland.free.fr/accueilN.php
( http://nintendoisland.free.fr/style2.css )

Le design est composé de 3 colonnes. Celle de gauche est en float:left; et celle de droite float:right; celle du milieu n'a pas de propriété précise. C'est d'ailleurs le div du centre qui pose problème puisqu'il descend sous IE jusqu'à atteindre la fin des 2 autres colonnes..

Merci d'avance à tous ceux qui auront la patience de se pencher sur mon cas Smiley cligne
Modifié par Sheika (25 Aug 2005 - 14:08)
slt


#centre {
float: none; vertical-align: top; padding: 0 20px 0 12px; margin: 0; width: 410px; text-align: justify;
}


çà c'est correct.
slt


#centre {
float: none;
vertical-align: top;
padding: 0 20px 0 12px;
margin: 0;
width: 410px;
text-align: justify;
}


çà c'est correct.
Je te conseille d'utiliser le positionnement absolu car avec les floats les marges sur IE sont différentes sous FF donc il y a des décalages qui parfois peuvent tout chambouler. Smiley cligne
Etrange ! Chez moi ça descend... Quelle version d'IE as-tu ? Moi c'est la 6 et quelque..

Bon reprenons les bases ^^'

Pour créer un site à 3 colones, j'aurai inséré ce code..

Dans le body
a écrit :

<div class="all">
<div class="header"> </div>
<div class="menuleft"> Menu de gauche </div>
<div class="menuright"> Menu de droite</div>
<div class="contenu"> Le contenu</div>
<div class="footer"> </div>
</div>


Dans la css
a écrit :

* {margin: 0; padding: 0;}

#all
{
width: 775px;
margin: auto;
}

#header
{
background-image: url("design/head1.jpg");
background-repeat: no-repeat;
width: 775px;
height: 136px;
}

#menuleft
{
float: left;
width: 170px;
}

#menuright
{
float: right;
width: 170px;
}

#centre
{
float: none;
width: 410px;
}

#footer
{
clear: both;
width: 775px;
}


Merci de me reprendre s'il y a une erreur. Ce qui nous donne : http://nintendoisland.free.fr/simple.htm

Bon bah voilà^^La colonne ne descend plus ^^'

Par contre même avec magin: auto; IE ne centre pas mon design Smiley ohwell ( -> jeter un oeil à la feuille de style : http://nintendoisland.free.fr/stylesimple.css ) Smiley ohwell
Modifié par Sheika (25 Aug 2005 - 13:39)
Bon et bien tout est réglé ! Pour le problème du "centrage" sous IE il suffisait de rajouter

a écrit :
<!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" lang="fr" xml:lang="fr">


En haut de la page Smiley lol
évidement il ne faut pas rester en mode mode quirk, doctype obligatoire.de toutes façons,tu auras forcément d'infimes décalages, vu le nombre de div et table que tu imbriques sans compter les frames.

la copie d'écran à été faite avec ie6.

ie ne supporte pas les marges à auto.sinon on aurait pas besoin de hack pour le centrage. Smiley cligne
Sujet clos
Aller à