28173 sujets

CSS et mise en forme, CSS3

Dimensions div differentes entre FF et IE

Bonjour,

j'ai besoin de votre aide pour un petit probléme.
Déjà voici la page en question :

Au début j'avais ce probléme la :
http://www.vagabond-crew.com/blog/test/

Sous firefox c'est nickel je n'ai aucun probléme mais sous IE le div ( en bordeaux ) est decalé !


Si vous pouvez m'expliquer où est le probléme ca serait sympa ^^

Code CSS :

body {
    background-image:url(images/bg.jpg);
    margin:Opx;
}

#Container {
    position:absolute;
    margin-left:50%;
    left:-450px;
    top:0px;
    width:900px;
    height:700px;
}

#Header {
    background-image:url(images/Header.gif);
    left:41px;
    top:0px;
    width:815px;
    height:239px;
}

#Page {
    background-image:url(images/PageBG.gif);
    width:815px;
}

#PageContent {
    background-color:#990000;
    width:530px;
    padding:0px;
    margin-left:250px;
}

#Menu {
    float:left;
    background-image:url(images/MenuBG.gif);
    width:248px;
    background-repeat:repeat-y;
    padding-right:30px;
    padding-left:30px;
}

#MenuFooter {
    left:-30px;
    bottom:-10px;
    position:relative;
    width:248px;
    height:50px;
}

#Footer {
    left:41px;
    top:649px;
    width:815px;
    height:51px;
}

Code HTML :

<div id="Container">
    <div id="Header">
    
    </div>
    <div id="Page">
            <div id="Menu">
                   fsds<br />
                   dfdfsdf<br />
                   dfdfsdfs<br />
                   <img id="MenuFooter" src="images/MenuFooterBG.gif" width="248" height="50" alt="">
           </div>
           <div id="PageContent">
            
           </div>
     </div>
     <div id="Footer">
        <img src="images/FooterBG.gif" width="815" height="51" alt="">
     </div>
</div>


------

Puis,

J'ai reussi à regler le probléme du decalage :

Il fallait pas mettre un taille en px pour le pagecontent


#PageContent {
    background-color:#990000;
    width:XXXpx; ==> width:60%;
    padding:20px;
    margin-left:250px;
}

En le mettant en % ca a fonctionnait mais la j'ai un nouveau probleme justement la taille n'est pas interpreté de la meme facon et j'a ivu que c'était un bug d'IE mais j'arrive pas à le fixer.


Lien : http://www.vagabond-crew.com/blog/test2/
Modifié par Samad (26 May 2006 - 00:29)
gege71 a écrit :
Plus simple ne lui met pas de taille, supprime carrément le width

Oui, c'est le mieux à faire. En spécifiant uniquement la marge de gauche (et si besoin la marge de droite), tu restreins le bloc à une largeur donnée, car son bloc parent a déjà une largeur fixe.

Si tu veux savoir l'origine du problème, c'est dû à un bug d'IE dans la gestion des flottants. Théoriquement, le flottant (ici ton menu) "flotte" par dessu les autres blocs en flux normal (ici ton bloc div#PageContent), et ne repousse que les éléments de type en-ligne, en particulier le texte. D'ailleurs, sous Firefox, tu peux voir que le bloc menu étant un peu large (largeur fixe + padding qui se rajoute à la largeur, je pense), le texte de la zone de contenu est repoussé.

Le problème avec IE, c'est que si le flottant jouxte un bloc doté de HasLayout, ce bloc ne peut plus se glisser sous le flottant. Et parmi les propriétés qui confèrent le Layout à un bloc, il y a la propriété width.

Cf le détail ici :
http://www.test.blog-and-blues.org/haslayout/tests/float4.html
Ok merci pour toutes ces réponses mon probléme est reglé Smiley cligne

Sinon une question de débutant, quand un text ou une image est large ça dépasse le div la contenant, mais la ya une autre différence :
-- IE : le div s'élargit aussi et couvre tout le texte.
-- FF : le div ne s'elargit pas et le texte dépasse le div.

comment peut on restreindre le contenu à ne pas depasser le div ??
Samad a écrit :
comment peut on restreindre le contenu à ne pas depasser le div ??

Euh… en ne mettant pas des URL brutes de trois kilomètres dans le texte, et en évitant de mettre des images trop grandes ?

Sinon, il doit y avoir moyen de jouer avec un overflow: hidden sur le bloc conteneur. Pas sûr du comportement d'IE dans ce cas.
mpop a écrit :

Sinon, il doit y avoir moyen de jouer avec un overflow: hidden sur le bloc conteneur. Pas sûr du comportement d'IE dans ce cas.


En terme d'accessibilité, overflow:auto; de préférence. Pas de problème a priori avec IE.
Sujet clos
Aller à