28173 sujets

CSS et mise en forme, CSS3

Mon div contenu se fait la malle :(

Bonjour tout le monde,

Je rencontre actuellement un problème d'affichage avec mon CSS dans la mesure où rien ne va plus sur IE alors que Firefox ou Opera ne semblent pas rencontrer de difficultées !

Voici mon problème :
-- Sur Firefox --
Image indisponible

-- Sur IE (6 ou 7) --
Image indisponible

Tout le monde aura repéré la différence un peu génante. J'ai bien conscience que ce type de problème est assez fréquent mais je n'ai pas su repérer mon erreur d'où cet appel à l'aide.

Je vous communique la structure HTML d'une page ainsi que le CSS épuré qui y correspond en espérant que mon erreur s'y trouve !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head></head>
<body>
        <div id="banniere"></div>
        <div id="corps">
                <div id="menu"></div>
                <div id="contenu"></div>
        </div>
        <div id="copyright"></div>
</body>
</html>


#banniere {
        height: 95px;
}

#corps {
        overflow : hidden;
}

#menu {
        float: left;
        width: 220px;
}

#contenu {
        overflow: hidden;
}

#copyright {
        text-align: center;
}


Quelqu'un m'a alors aiguillé sur les margin du body, sachez qu'il a les propriétés suivantes :
body {
        background-color: #cccccc;
        font-family: Verdana, Arial, Sans-Serif;
        margin: 5px;
}


Le problème se manifestant aux alentours du titre <h1> (en jaune sur les images), voici le CSS associé :
#contenu h1 {
        margin-top: 0px;
        font-family: Trebuchet MS, Verdana, Arial, Sans-Serif;
        font-variant: small-caps;
        font-size: medium;
        font-weight: bold;
        border: solid black 1px;
        padding: 4px;
        text-indent: 20px;
        clear: both;
}


J'ai pensé au clear du h1 mais, en le retirant, j'obtiens ceci :
Image indisponible

Merci !
Modifié par Phi (28 Jul 2013 - 16:55)
Je ne rencontre ton probleme d'affichage sous IE que lorsque je diminue ma resolution.
A visto de naz, je dirais que tes DIV avec float:left qui ne contiennent plus dans l'ecran se deplacent automatiquement a la ligne suivante.
Peut-etre qu'en mettant l'ensemble dans un DIV a largeur fixe (1024px), et en specifiant overflow:auto pour le BODY, ils devraient rester en place, avec un scroll lateral si ils ne contiennent pas.
Sinon, y'a des bons deals sur ce site... Aston Martin a -0%! Smiley cligne
Bonjour,

Je pense que quand tu parle d'IE c'est de la version 6
Ca doit être le double margin bug, Ie6 double les marges sur les éléments flottants adjacents...
Une petite recherche sur le forum ou avec ton ami google ... Smiley cligne
Salut,

En fait, il a suffit de rajouter ceci :
* html #contenu, * html #corps { height: 1%; }


Cette simple ligne a tout réparé !

Pour ce qui est du double margin, je ne connaissais pas ce bug donc j'ai pu me documenter et le réparer facilement un peu partout sur le site ! Merci beaucoup. Pour ceux qui auraient le même problème, un float et un margin du même côté sur un bloc pose problème sur IE qui double le margin, il suffit d'ajouter la propriété display: inline; pour régler le problème.


J'ai cependant un autre problème, sur ma page d'accueil, les deux blocs permettant de filtrer par marque ou par différents critères réagissent assez mal notamment pour une faible résolution. Ce problème est mineur mais je profite d'avoir ouvert ce topic pour vous demander conseil à ce niveau.

Voici les CSS associés :
#marques {
	float: left;
	margin-left: 1%;
	margin-bottom: 30px;
	width: 47%;
	border: solid 1px black;
	background-color: #f4f8fe;
	padding: 5px;
	padding-bottom: 10px;
	display: inline;
}

#filtre {
	float: left;
	width: 47%;
	margin-left: 1%;
	border: solid 1px black;
	background: url("loupe.png") right bottom no-repeat;
	background-color: #ffffcc;
	margin-bottom: 30px;
	padding: 5px;
	display: inline;
}

#filtre p {
	text-align: center;
	font-size: xx-small;
}


A bientôt.
Modifié par Phi (28 Jul 2013 - 16:57)
Sujet clos
Aller à