28173 sujets

CSS et mise en forme, CSS3

Affichage très bizarre sous IE

Bonjour tout le monde,

Voilà j'ai un souci qui ne se produit que sous IE : le contenu de la page est partiellement affiché, j'ai l'impression que cela viens des float que j'utilise mais je n'arrive pas à savoir pourquoi, je cherche depuis 2 jours et je m'en remet à vous parce que je suis à bout Smiley bawling

Donc comme un exemple vaut mieux qu'un long discours voici l'url en question : www(.)webaxis(.)fr avec comme login/pass : dev/dev
Essayez les pages Prestation et services, et Presse sous Firefox et sous IE, vous verez qu'IE n'affiche pas les premiers <p> de la page...

Voici ma feuille de style : 
html {font-size: 100%;}

body{
	margin:0px;
	padding:0px;
	font-family:arial;
	font-size: .7em;
}

h1{
	font-size:1.6em;
	color:#666666;
}

h2{
	font-size:1.1em;
	color:#A40079;
}

b{
	color:#A40079;
}

img{
	border:0;
}

p{
	margin:0px;
	text-align:justify;
	line-height:18px;
}

#mainTable{
	margin:0px;
	padding:0px;
	width:100%;
	border-collapse:collapse;
	
}

#mainTable td{
	margin:0px;
	padding:0px;
	border: 0px dashed #000;			
}

#mainTable tr{
	margin:0px;
	padding:0px;		
}

#listeMenu{
	list-style-type:none;	
	
}

#listeMenu li{			
	margin:10px 10px 10px 0px;
	font-size:13px;
	font-family:verdana;		
	padding-left:60px;
}

#listeMenu li a{
	width:160px;
	padding-right:5px;
	text-decoration:none;
	border-right:3px solid #666666;		
	color:#444444;	
	display:block;	
	text-align:right;

}

#listeMenu li a:hover{
	border-right:5px solid #BB008C;	
	background-color:#efefef;
	padding-right:3px;
}

h1.interrogation{
	margin:0px;
	background-image:url('../img/puce_interrogation.jpg');
	background-repeat:no-repeat;
	background-position:left;
	padding-left:45px;
	height:35px;
	padding-top:18px;
}

h1.prestations{
	margin:0px;
	background-image:url('../img/puce_prestations.png');
	background-repeat:no-repeat;
	background-position:left;
	padding-left:45px;
	height:35px;
	padding-top:18px;
}

h1.charte{
	margin:0px;
	background-image:url('../img/puce_charte.jpg');
	background-repeat:no-repeat;
	background-position:left;
	padding-left:45px;
	height:35px;
	padding-top:18px;
}

#journal1{
	display:block;
	float:left;
	margin-right:30px;	
	width:181px;
	height:206px;
	background: url('../img/journal1_small.jpg') no-repeat 0 0 ;	
}

#journal1:hover{
background: url('../img/journal1_small.jpg') no-repeat 0 -206px ;
}

#journal2{
	display:block;
	float:left;
	margin-right:30px;	
	width:181px;
	height:206px;
	background: url('../img/journal2_small.jpg') no-repeat 0 0 ;	
}

#journal2:hover{
background: url('../img/journal2_small.jpg') no-repeat 0 -206px ;
}

#journal3{
	display:block;
	float:left;
	margin-right:30px;	
	width:181px;
	height:206px;
	background: url('../img/journal3_small.jpg') no-repeat 0 0 ;	
}

#journal3:hover{
background: url('../img/journal3_small.jpg') no-repeat 0 -206px ;
}


Merci d'avance pour votre aide !
Modifié par vallica (13 Jul 2007 - 08:18)
Help ! ca serait sympa si quelqu'un pouvait juste jeter un coup d'oeil à cet étrange comportement, parce le pire c'est que les zones cachées le sont presque aléatoirement, surtout, si je fais un CTRL+A sur la page, le texte caché apparait en surbrillance, donc il est bien là !
Bonjour,

Pour les bugs étranges d'IE6, voir Position Is Everything ou encore les pages de test des bugs de HasLayout sur le site de Laurent Denis.

En l'occurence, il s'agit d'un bug documenté sur Position Is Everything.
http://www.positioniseverything.net/explorer/peekaboo.html

Si je supprime la couleur de fond du div conteneur, plus de bug... mais plus de couleur de fond. Smiley cligne

La meilleure solution à mon sens consisterait à revoir la structure des blocs illustration+texte.
[b]HTML:[/b]
<div class="bloc">
	<img class="bloc-illustration">
	<div class="bloc-texte">
		<p>...</p>
		<p>...</p>
	</div>
</div>

[b]CSS:[/b]
div.bloc {
	overflow: hidden; /* empêche le dépassement des flottants dans Opera, Firefox, IE7... */
	width: 100%; /* Idem pour IE6 */
}
img.bloc-illustration {
	float: left;
}
div.bloc-texte {
	margin-left: 210px;
}

Si l'image est de largeur variable et si l'on veut que le texte s'adapte à cette largeur, on utilisera un contexte de formatage (avec à nouveau un overflow: hidden, et probablement un height: 1% en commentaire conditionnel pour IE6).
Bonjour,

C'est super, ta solution fonctionne, effectivement j'avais mal organisé mes blocs, ca montre bien que le fait de mettre encore plus de rigueur dans l'agencement des éléments résoud souvent les problèmes.

J'en profite pour te faire part d'un dernier souci : si tu regarde mon site sous IE et FF, tu verra que sur la colonne de gauche, le logo Ezpublish se positionne en haut pour FF et bien plus bas pour IE (lorsque tu es sur la page services qui est longue).
J'ai eu beau fixer la cellule contenant le menu avec un height à 0px (pour qu'elle soit réduite au minimum de ce qu'elle contient => la liste à puce), rien à faire sous IE elle s'etend vers le bas !
Bonjour
Tu peux tenter avec une valeur plus faible du HEIGHT (100px par exemple)
tu peux essayer aussi avec HEIGHT:AUTO pour voir..
#journal1, #journal2, #journal3{
	display:block;
	float:left;
	margin-right:30px;	
	width:181px;
	height:auto; /* ou bien 100px */
	background-image: url('../img/journal1_small.jpg') no-repeat 0 0 ;
}

#journal1:hover, #journal2:hover, #journal3:hover{
	background-image: url('../img/journal1_small.jpg') no-repeat 0 -206px ;
}
damned. j'allais répondre, mais j'arrive un peu tard...
en plus c'est moins bien Smiley cligne
Modifié par Gaoul (13 Jul 2007 - 10:57)
Smiley biggrin merci quand même !

Rien à faire avec cette cellule : si je met auto, elle s'etend trop bas même sous FF, et si je met une valeur "juste" du style 250px, c'est OK sous FF, elle s'agrandi un peu vers le bas, mais sous IE elle s'agrandi toujours trop !
vallica a écrit :
J'en profite pour te faire part d'un dernier souci : si tu regarde mon site sous IE et FF, tu verra que sur la colonne de gauche, le logo Ezpublish se positionne en haut pour FF et bien plus bas pour IE (lorsque tu es sur la page services qui est longue).

Là tu m'excuseras, mais je suis incompétent en mise en page à base de tableaux. Il faut dire qu'il est si rare qu'on en ait besoin que je n'ai jamais appris à les utiliser efficacement. Smiley cligne
a écrit :
il faudrait surement que j'essaye de le changer pour des divs


Attention aux raccourcis trop faciles : CSS != div/span. Smiley cligne
bien sur, mais la on parlait de changer la <table> qui sert de layout principal contre un ensemble de <div> qui reproduiraient le même aspect/comportement.

A ma connaissance je ne vois pas quoi utiliser d'autre que des div pour recréer les cellules de ma table principale...
Sujet clos
Aller à