28173 sujets

CSS et mise en forme, CSS3

Problème de placement de div sous IE

Voilà tout est dit dans le titre, sous Firefox c'est nickel mais sous IE les div sont repoussés vers le bas de la page... Concrètement ça donne ça :

http://tcaenen.free.fr/test1/index_div.html

Honnêtement je suis arrivé à un point où je souhaite juste que tout le monde passe à Firefox ou Opéra, IE ça commence vraiment à me *#é~% !! Restons calmes...

En tout cas si par miracle quelqu'un a une solution je m'engage a lui donner toute ma reconnaissance Smiley lol
Modifié par J-dub (20 Apr 2007 - 08:52)
Modérateur
Salut,

Peux tu sois mettre une capture d'écran pour se rendre compte ou mettre le code html et css ?

++
J'ai pas étudié en détail ton code mais j'imagine que c'est un probleme de calcul de dimensions entre IE et FF.
Fais gaffe à tes border et tes paddings qui sont pas forcément calculés de la même manières, et faisant que tes divs sont plus larges sous IE que sous FF, donc tiennent pas dans leur parent, donc se retrouvent en dessous.

Et aussi

#president {
	margin-right: 10px;
	float: right;
}


Attention, y a un bug sous IE6 avec les éléments en float et les margin, il double la valeur de tes margin (il va donc mettre 20px là), c'est sans doute ça qui casse tout.
Pour le corriger, rajouter un simple display:inline à la déclaration

J'ai pris l'habitude d'automatiquement ajouter display:inline à chaque fois que j'écris float:left/right perso ^^
Modérateur
re,

je crois que c'est la manière que tu as élaboré ton header. je pense que les deux plaques et le menu, tu devrais les inclure dans ton objet flash Smiley cligne . Ensuite fais ceci :



<body>
         <div id="conteneur">
         ton objet flash
         </div>
</body>








body     { text-align: center; margin: 0; padding: 0 }

#conteneur{ margin-top: 0px; margin-right: auto; margin-left: auto; width: 700px }


++
Arf je ne suis pas l'auteur de l'animation flash mais je peux toujours essayer j'imagine Smiley langue

Sinon le menu est en flash, le menu dans le code HTML est un menu de secours au cas où le plugin flash n'est pas installé.
Modifié par J-dub (20 Apr 2007 - 10:39)
Bonjour J-dub, peut être qu'en rendant ta page valide tu aurais plus de résultat non ?

Html (impossible à valider en l'état, il faut revoir ton encodage de caractère)

Css (enlever les style donner sur tes balise html)

En gros ce que tu doit faire pour que ca aille mieux, tu as choisi le (x)html 1.0 strict.

Les balises <img> sont autofermantes donc : 
<img src="" alt="" [b]/[/b]>


Change ceci :

<meta http-equiv="Content-Type" content="text/html; charset=[b]utf-8[/b]" />


En cela :

<meta http-equiv="content-type" content="text/html; charset=[b]iso-8859-1[/b]" />


Supprimer ce qui est en gras içi :

<div id="bg_gauche" [b]height=100%[/b]> &nbsp; </div>


Une autre petite chose, en (x)html, toutes les balises doivent être en minuscule.

Avec ceci, tes balises <div> ne seront plus ouverts dans tous les sens Smiley cligne Et ton header sera bien en place en haut de ton site !
Modifié par Super_baloo8 (20 Apr 2007 - 10:50)
Le problème de cette mise en page, c'est qu'elle est fondée sur un abus caractérisé de flottants. Forcément, avec la gestion parfois assez erratique des flottants par IE6, ça ne peut que poser des problèmes.

Limiter le nombre total de flottants que l'on utilise est toujours une bonne chose.

Ici, tu as quatre blocs flottants purement décoratifs. Smiley sweatdrop
Il aurait fallu travailler avec des images de fond, tout simplement.

Quant aux blocs de contenus, il faudrait les grouper en deux colonnes (deux div), dont la première serait flottante et la seconde serait positionnée en flux (normalement, quoi), avec une marge latérale ou un contexte de formatage pour éviter qu'elle ne passe sous le flottant.
Au fait, merci pour le son non sollicité au chargement de la page. C'est toujours discret au boulot. Smiley fache
Florent V. a écrit :
C'est toujours discret au boulot. Smiley fache


Il faut toujours avoir une petit paire d'écouteurs sur soi moi je dis
Smiley biggol
Modifié par Super_baloo8 (20 Apr 2007 - 11:04)
Superbaloo8 -> Merci Smiley smile

J'ai suivi tes conseils, la page est maintenant valide xhtml et css.

Florent V. -> Je vais voir ça
Florent V. a écrit :
Quant aux blocs de contenus, il faudrait les grouper en deux colonnes (deux div), dont la première serait flottante et la seconde serait positionnée en flux (normalement, quoi), avec une marge latérale ou un contexte de formatage pour éviter qu'elle ne passe sous le flottant.


Ou mettre les deux colonnes en flottant et les faire rentrer dans le flux en ajoutant un overflow:hidden/auto à leur parent (voire un height:1% pour IE6)
Sujet clos
Aller à