28172 sujets

CSS et mise en forme, CSS3

Float:Right met tout en l'air dans IE ...

Bonjour,

je viens vers vous dans mon grand désespoir avec IE6.
J'ai fouillé sur Internet pour essayer de trouver un problème semblable au mien (ce qui est souvent le cas avec les bugs d'IE 6), mais je n'ai rien trouvé de comparable.

J'ai une bannière en haut de ma page avec une image de fond, qui doit contenir deux images. Une tout à gauche et l'autre tout à droite.
Je mets donc sur mon DIV "boutonactu" qui doit se trouver tout à droite un 'float:right'.

Mets quand je fais ça, ce n'est pas juste ce DIV qui ne prend pas sa place, c'est tout une partie de ma feuille CSS qui n'est plus lu par IE6. Smiley eek .

Quand je mets le float:right en commentaire, tout le reste de la page se réaffiche normalement !

JE vous mets le code de ma banniere HTML

<div id="bannieretheatre">
		
			<div id="logoheritiers">
				<a href="index.php"><img src="IMG/logo.png" alt="" /></a>
			</div>
			<div id="boutonactu">
				<img src="IMG/menuactuUP.png" onmouseup="DerouleActu(this)"  alt="" />
			</div>
			
		</div>


puis mes déclaration CSS qui vont avec : 

#boutonactu {
	float:right;
	margin-top:30px;
	width:118px;
	height:42px;
}
#logoheritiers{
	height:133px;
	width:180px;
}
#bannieretheatre {
	margin:0px;
	width:1000px;
	height:133px;
	background-image:url("IMG/bannierehaut.png");
	background-repeat:no-repeat;
	background-position:top;
	text-align:left;
	overflow:hidden;
}


J'ai essayé en mettant le DIV boutonactu l'autre DIV, mais cela n'a rien changé.


Malheuresement, je n'ai pas encore d'adresse Internet pour vous montrer ce que ca donne ... Par contre, j'ai mit les images du résultat en local :

Sous IE 6 avec le float:right

Sous IE6 sans le float:right

Ce que ca donne sous FireFox ou Safari
Salut totoine et bienvenue, Smiley smile

en l'occurrence IE6 n'y est pour rien : les éléments en float doivent apparaître les premiers dans le code html, ce qui donne 
<div id="bannieretheatre">
	<div id="boutonactu">
		<img src="IMG/menuactuUP.png" onmouseup="DerouleActu(this)"  alt="" />
	</div>
	<div id="logoheritiers">
		<a href="index.php"><img src="IMG/logo.png" alt="" /></a>
	</div>
</div>

Une (re)lecture des tutoriels (notamment ceux qui concernent le positionnement) serait sans doute une bonne idée. Smiley cligne
Modifié par Heyoan (22 Dec 2008 - 06:43)
Bonjour,

je viens de me rendre compte que la relecture de mon message n'a pas été très efficace.

Ma dernier phrase, il fallait lire : "J'ai essayé de mettre le DIV "boutonactu" avant le DIV "logoheritiers" mais cela n'a rien changé !"

Mais effectivement, à la suite de cet essai, j'ai remis comme avant.


J'ai donc sur ton conseil repris le tutoriel de positionnement, et j'essaye de faire cette présentation sans le float:right.

Ce n'est pas encore gagner, mais je vous tiens au courant.
Administrateur
Bonjour et bienvenue totoine, Smiley smile

la partie non-stylée serait-elle une liste, par le plus grand des hasards pas fortuit du tout?
- charges-tu 20 feuilles de style ou commentaires conditionnels avant?
- as-tu plein de <!-- commentaires --> dans le code HTML? En dév çaÿbieng, dans le code HTML çaÿmal à cause d'IE6 si flottants il y a (mais ça concerne le "duplicated content bug" a priori, rien d'autre de fréquent). Enlève-les quand même si tu en as, pour voir.
- utilises-tu du positionnement relatif/absolu quelque part? (juste par curiosité)
On est bien accueilli par ici Smiley cligne

- Donc sur les images que j'ai mit, la partie non-stylée n'est pas une liste. c'est une suite de DIV générée par PHP.
Mais des fois, dans mes essais pour essayer de trouver une solution, ce sont les boutons à gauche de la page (qui est une liste) qui perd son style !


- J'ai dans mon <head> 4 feuilles de styles différentes, plus une conditionnelle pour IE.

- Je vais essayer de supprimer les commentaires HTML dans la page, mais il doit y en avoir que deux ou trois.
Est-ce que les commentaires dans les feuilles CSS peuvent aussi poser des problèmes ? Parce que là, oui j'en ai plein !

- J'utilise effectivement du positionnement relatif pour les élèments du corps, principalement pour permettre à IE de comprendre mes overflow:hidden.
Mais pas de absolu.

Merci pour ces précisions !


Je n'avais pas touché au HTML depuis .... longtemps.. à l'époque ou parlait à peine du CSS. J'avoue que ça ouvre plein de porte, mais qu'est ce que les navigateurs compliquent tout !
Modérateur
bonjour,

il t"est toujours possible de nous laisser le code d'une page complete et les feuilles de style ici , et eventuellement uploadé sur un hebergeur d'image les quelques images necessaire a mettre ton bug en evidence.

Sitot que float , contexte de formatage et en plus IE6 est concerné , un extrait de code ne peut plus aidé , l'ensemble de la page et tes feuilles de style interagissent en influant ou modifiant les comportements .

Bonnes fêtes

GC
Sujet clos
Aller à