Aller au contenu

Bug IE

Soleixa

Par Soleixa
dans (X)HTML et CSS

 Partager

Sujets conseillés

Soleixa

Soleixa

Posté
Posté

Bonjour,

Pour changer un problème d'affichage sous IE (tout va bien sous firefox, safari et mozilla).

Je n'avais pas encore rencontré ce problème jusqu'à maintenant dans mes mises en page.

Voici une image (c'est plus parlant!) de mon problème:

image2.png

Voici le code CSS :

CODE
html { font-size: 100%; /*height: 100%;*/ }

body, form, select, imput, table { margin:0; padding:0; }

body {

font: 100% Verdana, Arial, Helvetica, sans-serif;

background: #0075bb;

text-align: center;

color: #0075bb;

height:100%

}

#container {

width: 900px;

background: #FFFFFF;

margin: 10px auto;

text-align: left;

}

#header {

background: #FFFFFF;

margin: 0;

}

#sidebar1 {

float: left;

width: 145px;

background: #FFFFFF;

}

#sidebar2 {

float: right;

width: 170px;

background-image:url(../../images/sidebar2_fond_news.jpg);

background-repeat:no-repeat;

background-position:bottom;

background-color:#FFFFFF;

min-height: 512px;

}

#mainContent {

background-image:url(../../images/mainContent_fond.jpg);

background-repeat:no-repeat;

background-position:top;

background-color:#FFFFFF;

margin: 0 170px 0 145px;

}

#footer {

padding: 10px 10px 10px 20px;

background:#FFFFFF;

border-top: 2px solid #f3c301;

border-bottom: 2px solid #f3c301;

}

.clearfloat {

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

Voici le code de la page :

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Centre de création du XIX</title>

<!-- lien avec la page de scripts javascript externe -->

<script language="Javascript" type="text/javascript" src="data/js/rollover.js"></script>

<!-- lien avec la page de styles externes -->

<link rel="stylesheet" type="text/css" href="data/css/structure.css">

<!--[if IE]>

<style>

/* placer les corrections pour toutes les version d'IE dans ce commentaire conditionnel */

#mainContent { height: 512px;} /*affichage de l'hauteur de l'image d'arrière plan en totalite sous IE*/

#sidebar2 { height: 512px;} /*affichage de l'hauteur de l'image d'arrière plan en totalite sous IE*/

</style>

<![endif]-->

<!--[if IE 7]>

<style>

/* placer les corrections pour toutes les version d'IE dans ce commentaire conditionnel */

#mainContent { zoom: 1; }*/

</style>

<![endif]-->

</head>

<body class="thrColFixHdr" onload="MM_preloadImages('images/bt_home_on.gif','images/bt_contact_on.gif','images/bt_accueil_on.png','images/bt_quisommesnous_on.png','images/bt_spectacles_on.png','images/bt_formations_on.png','images/bt_actualites_on.png','images/bt_contact_on.png')">

<div id="container">

<div id="header"><img src="images/header_fond.png" alt="logotype" width="730" height="108" title="" /><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bt-accueil','','images/bt_home_on.gif',1)"><img src="images/bt_home_off.gif" alt="Retour accueil" name="bt-accueil" width="72" height="108" border="0" id="bt-accueil" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bt-contact','','images/bt_contact_on.gif',1)"><img src="images/bt_contact_off.gif" alt="Envoyez un message au Centre de Création du 19" name="bt-contact" width="98" height="108" border="0" id="bt-contact" /></a></div>

<!-- fin de #header -->

<!-- colonne de gauche -->

<div id="sidebar1"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('accueil','','images/bt_accueil_on.png',1)"><img src="images/bt_accueil_off.png" alt="Retour page d'accueil" name="accueil" width="145" height="69" border="0" id="accueil" /></a><a href="qui-sommes-nous.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('quisommesnous','','images/bt_quisommesnous_on.png',1)"><img src="images/bt_quisommesnous_off.png" alt="Qui sommes-nous ?" name="quisommesnous" width="145" height="37" border="0" id="quisommesnous" /></a><a href="spectacles-centre-de-creation-du-19.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('spectacles','','images/bt_spectacles_on.png',1)"><img src="images/bt_spectacles_off.png" alt="Les spectacles à voir et ceux déjà vus" name="spectacles" width="145" height="39" border="0" id="spectacles" /></a><a href="ateliers-formations-theatre.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('formations','','images/bt_formations_on.png',1)"><img src="images/bt_formations_off.png" alt="Formations et interventions" name="formations" width="145" height="52" border="0" id="formations" /></a><a href="actualites-spectacles.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('actualites','','images/bt_actualites_on.png',1)"><img src="images/bt_actualites_off.png" alt="Actualités du Centre de Création du XIX" name="actualites" width="145" height="42" border="0" id="actualites" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/bt_contact_on.png',1)"><img src="images/bt_contact_off.png" alt="Contactez le Centre de création du 19" name="contact" width="145" height="41" border="0" id="contact" /></a><img src="images/sidebar1_illustration.jpg" alt="illustration" title="Compagnie de théatre" width="145" height="232" /></div>

<!-- fin de #sidebar1 -->

<!-- colonne de droite -->

<div id="sidebar2"><img src="images/sidebar2_illustration.gif" alt="illustration" width="170" height="253" />

<p> </p>

<!-- fin de #sidebar2 -->

</div>

<!-- colonne centrale -->

<div id="mainContent"><img src="images/titre_accueil.png" alt="titre-accueil" width="246" height="23" class="PaddingP_accueil" title="Centre de création du XIX" />

<h3 class="PaddingP_accueil">Spectacles et interventions artistiques pour ensoleiller, permettre et enrichir lExpression</h3>

<p class="PaddingP_accueil">Depuis 1995, </p><br class="clearfloat" /></div>

<!-- pied de page -->

<div id="footer">

<ul>

<li><a href="index.html" title="">Accueil</a></li> |

<li><a href="qui-sommes-nous.html" title="">Qui sommes-nous ?</a></li>

</ul>

<!-- fin de #footer -->

</div>

<!-- fin de #container -->

</div>

</body>

</html>

Pouvez-vous m'aider

A l'avance merci

Myriam

Dudu

Dudu

Posté
Posté

Salut

Pourtant, ce bug est connu de longue date et beaucoup d'entre nous l'ont déjà subi.

On ne le rencontre qu'avec la version 6 d'Explorer, la version 7 ayant réglé le problème.

Un peu de lecture ?

PS: ton image part en erreur 404 :unsure:

Soleixa

Soleixa

Posté
  • Auteur
Posté

Bonjour Dudu,

En fait, je n'avais jamais rencontré ce problème. En revanche, j'ai cherché un moment sur le web donc j'avais identifié le problème des 3px mais je n'avais pas trouvé de solution notamment j'avais trouvé le lien : "Float et haslayout ou quand Laurent Denis décortique le problème en testant différents cas de CSS". Il donne la cause mais pas la solution.

Encore maintenant, je ne suis parvenu qu'à résoudre une moitié du problème.

Dans mes commentaires conditionnels, j'ai ajouté :

		#mainContent {
		   position:relative;
		   right:3px;/* reprend les 3 px de decallage */
	}
	#sidebar1 {
			display:inline;/* rattrape le bug de marge double */
	}

tel que l'expliquait votre lien vers : Rattrapons ces 3px de bug de IE dûs aux flottants Explication du problème, suivi d'une solution viable et pérenne. Un bon article comme on les aime, simple et efficace

Donc le décalage entre la colonne de gauche (sidebar1) et le contenu central à disparu mais celui entre le contenu central et la colonne de droite (elle aussi en float) est toujours là. Et il n'est pas possible de jouer en même temps sur left et right en position relative.

Génial, j'ai enfin l'impression d'avancer :P

Auriez-vous une autre idée, svp.

A l'avance merci

Myriam

Soleixa

Soleixa

Posté
  • Auteur
Posté

Bonjour,

Vous n'avez pas d'autres idées ?

J'ai repensé à ce que tu as dis Dudu, et je crois savoir pourquoi je n'avais jamais rencontré le problème. Habituellement, je développe sur PC avec IE 6 comme navigateur de référence, du coup mes mises en page sont plutôt position absolue et div imbriquées :smartass:

Cette fois ci, j'ai développé sur Mac avec Safari comme navigateur de référence. Du coup, ma mise en page et surtout ma feuille de style est beaucoup beaucoup plus simple !

C'est pour cela que j'aimerai bien trouvé la solution et continuer à utiliser cette méthode de mise en page car elle est beaucoup plus flexible et accessible.

En attendant, je continue de chercher comment je pourrais résoudre ce décalage devant mon float right.

A+

Soleixa

Soleixa

Posté
  • Auteur
Posté

Bonjour,

Ne recevant pas de nouvelles idées pour résoudre mon problème par un hack, j'ai fait comme d'habitude.

J'ai répété le background image dans le container global du coup je n'ai plus de décalage.

Pour ma part, le problème est résolu mais je laisse le post ouvert au cas où quelqu'un aurait une solution pour le décalage de droit comme celle proposée par Dudu pour le décalage de gauche.

A+

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...