[résolu] Problème avec IE sur certaines pages

Bonjour,

J'ai un problème d'affichage des propriété css d'un élément H1.
Ce problème ne s'affiche que avec IE et sur certaines pages seulement.
Je n'arrive pas à comprendre la raison car il n'y a pourtant pas beaucoup de différence entre les page qui ont le problème et les autres.

J'espère que quelqu'un arrivera à expliquer la cause.
le site est http://www.seebz.be/
et le problème est sur les pages 'accueil' et 'liens' (n'hésitez pas à cliquer sur les liens du menu pour constater le bug)
je rappelle que le bug n'est qu'avec IE.

Merci d'avance
Modifié par seebz (03 Dec 2006 - 12:10)

Bonsoir,

Je ne pense pas que ton problème vienne de là mais tes balises <h1> sont suivies de balises de fermeture </h2>.
Modifié par Eldebaran (05 Nov 2006 - 23:20)

oui, en effet, merci de la remarque mais ce n'est pas ce h1 (logo) qui pose probleme.

il s'agit du h1 défini dans la balise div#content

mais merci déja pour ta remarque, je modifie cela de suite.

par contre mon problème est toujours présent, l'as-tu constaté aussi ?
(peut-etre est ce seulement chez moi)

Ton bug est bien visible chez moi.

Ca ressemble à "Peek-a-boo".

Bon courage !

je dois avouer ne pas avoir tout compris a propos de ce "peek-a-boo". (mon anglais est encore limité et je n'ai pas vu le bug dont il parlait)

es-tu sur qu'il s'agisse de ca ?

pourquoi ca le fait pas à toutes les pages alors ?

ralala, ca prend la tête lol.

en fait les pages qui fonctionnent bien sont celle du début, pour les autres j'ai ajouter l'affichage du contenu dynamiquement, enfin presque.

mais le style de la page reste le meme, je veux dire l'imbrication des balises ne change pas.

j'espere trouver la solution, sinon je devrais ajouter un div de plus (tant qu'on y est).

mais bon, ca m'aurait plu d'avoir une explication.

en tout cas, merci déja de t'interresser à mon cas

bonjour,

il semble aussi s'agir peut-etre du "haslayout" , essaie un height:1em; voir si cela reactive l'affichage et que la regle css donne un rendu convenable dans chaque navigateur .

Ce lien est souvent donné ici :
http://www.test.blog-and-blues.org/haslayout/trad_temp.html

++

Bonjour,

Tu as divers problèmes avec tes imbrications de blocs qui ne sont pas dimensionnés "haslayout ??" et aussi le padding de ton h1 '.

Essaye :

html { font-size: 100%; }

body {
	margin: 0;
	padding: 0;
	background: #eee url("bg.png") top repeat-x;
	color: #333;
	font: 0.75em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
}

h2, h2 a {
	font-weight: normal;
	font-size: large;
	margin: 25px 0 0 0;
	text-transform: capitalize;
	color: #7fc31c;
	color: #6b1;
}
p {
	margin: 5px 0px;
}
a {
	color: #006600;
}
a:hover {
}
a:visited {
	color: #009933;
}
img {
	border: 0;
}
#top {
	margin: 0 auto;
	padding: 0;
	height: 110px;
	width: 770px;
	position: relative;
	background: #A5E204;
}
#top H1#logo {
	margin: 0;
	padding: 0;

	width: 340px;
	height: 75px;

	position: relative;
	top: 25px;
	left: 15px;

	background: transparent url("logo.png") center;
}
#top H1#logo a {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #fff;
	width: 340px;
	height: 75px;
	text-indent: -9999px;
	text-decoration: none;
	overflow: hidden;
}
/* MENU */
#menu		{ margin:0; padding:0; position:absolute; top:13px; right:4px; width:283px; }
#menu li 	{ display:inline; margin:0; padding:0; float:left; }
#menu a 	{ display:block; text-indent:-999px; overflow:hidden; height:40px; }
#menu a.home 	{ width: 78px; background: transparent url(menu.png) no-repeat 0 -40px; }
#menu a.blog 	{ width: 58px; background: transparent url(menu.png) no-repeat -78px -40px; }
#menu a.links 	{ width: 59px; background: transparent url(menu.png) no-repeat -136px -40px; }
#menu a.contact { width: 88px; background: transparent url(menu.png) no-repeat -195px -40px; }
#menu a.home:hover		{ width: 78px; background: transparent url(menu.png) no-repeat 0 0; }
#menu a.blog:hover		{ width: 58px; background: transparent url(menu.png) no-repeat -78px 0; }
#menu a.links:hover		{ width: 59px; background: transparent url(menu.png) no-repeat -136px 0; }
#menu a.contact:hover 	{ width: 88px; background: transparent url(menu.png) no-repeat -195px 0; }

#page { 
	margin: 0 auto;
	padding: 0;
	width: 770px;
	background: url("page-bg.png") repeat-y center;
}
#content { 
    width: 100%;
	margin: 0;
	padding: 0;
/*	background-color: #7ec21b; */
	background: blue;
	border-top: 1px solid #fff;
}
#content h1 {
	margin: 0;
    padding-left: 20px;
    line-height: 2em;
	height: 50px;
	color: #eee;
	font-weight: lighter;
	font-size: 1.8em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
	text-transform: capitalize;
	background: #2C3336;
	border-bottom: 1px solid #fff;
}
#text {
	width: 520px;
	margin: 0;
	padding: 0 15px 20px 15px;
	float: left;
	background-color: #fff;
	border-right: 1px solid #8b0;
	text-align: justify;

	height: auto !important;
	height: 300px;
	min-height: 300px;
}
.viewall {
	color: #335566;
	text-decoration: none;
/*	font-style: italic; */
	margin: 0;
	float: right;
	display: inline;
}
.button {
	margin: 35px 5px 0 5px;
	text-align: center;
}
.button a {
	border: #6E9823 1px solid;
	padding: 2px 4px;
	text-transform: capitalize;
	color: black;
	background-color: #D8F998;
	text-decoration: none;
}
.button a:hover {
	font-weight: normal;
	color: #6E9823;
}
#sidebar {
	width: 169px;
	margin: 0;
	padding: 20px;
	float: right;
	display: inline;
	color: #fff;
}
#foot {
	margin: 0;
	padding: 5px 10px;
	height: 4em;
	background: #2C3336 url("title-bg.png") center;
	color: #697174;
	color: #ddd;
	font-size: .8em;
	clear: both;
	border-top: 1px solid #fff;
}
#foot a {
	font-weight: bold;
	color: #A5E204;
}
#foot #copyright {
	width: 50%;
	float: left;
}
#foot #info {
	width: 205px;
	float: right;
	text-align: right;
}
#foot #valid img {
	margin: 2px 9px;
}

/* Page contact */
#form_contact {
	border: 1px solid #A7A7A7;
	background-color: #EEEEEE;
	margin: 20px 10px;
	padding: 10px;
	font-style: italic;
	text-align: left;
}
.text_contact {
	margin: 10px;
}
#form_contact textarea {
	width: 403px;
	height: 100px;
}
#btn_send, #btn_reset {
	margin-top: 5px;
	background-color: #FFEEAA;
	border: 1px solid #cc6600;
}

Ce serait peut être une des solutions.
Modifié par ghost (06 Nov 2006 - 00:08)

J'avais essayer en mettre en height mais ca ne change rien au problème.

Après plusieurs essais, je me suis rendu compte que c'était uniquement lorsque le 'min-height' (ou plutot height avec IE) sur l'élément 'frère' était actif que le problème survenait.

#text {
	width: 520px;
	margin: 0;
	padding: 0 15px 20px 15px;
	float: left;
	background-color: #fff;
	border-right: 1px solid #8b0;
	text-align: justify;

	height: auto !important;
	height: 300px;
	min-height: 300px;
}

j'avais mis ca pour éviter que le pied de page se retrouve en plein milieu sur une page ou il n'y a pas beaucoup de texte (estétiquement ca donne mieu).

Si je met le min height à l'élément parent (div#content) je me retrouve avec le pied de page vers le milieu mais et le bloc blanc et vert (de droite) qui dépace par dessous.

Y a t-il moyen de corriger cela de facon a ce que j ai un min-height qui fonctionne ?

pour y voir plus clair :

<body>

<div id="top"> LOGO ET MENU </div>

<div id="page">

<div id="content"> BG VERT

<h1> TITRE QUI POSE PROBLEME </h1>

<div id="text"> TEXTE, BG BLANC </div>

<div id="sidebar"> BLOC DE DROITE </div>

<div id="foot"> PIED DE PAGE </div>

</div>	<!-- end content -->
</div>	<!-- end page -->

</body>

Modifié par seebz (06 Nov 2006 - 09:58)

Bon ca y est, le problème est résolu, ne me demander pas comment , je n'en ai aucune idée.
Je n'ai fait aucune modification importante mais bon l'affichage est bon maintenant, c'est ce qui compte

Je m'étonnerais jamais assez du comportement par moment étrange d'IE.
Modifié par seebz (06 Nov 2006 - 12:04)