[HTML/ CSS] Incompatible IE

Eléphanteau du PHP | 28 Messages

12 sept. 2007, 18:17

Bonjour, je souhaiterais réaliser un site compatible IE et FF en même (FF et les autres :D ) mais tout ne étant extensible (pas grave pour les normes W3C :? ). J'ai commencer par le header qui est découper en trois partie horizontal, la partie gauche une longueur fixe comme à droite mais le milieu est extensible pouèr chaque résolution de la fenêtre. Sous FF sa marche (et les autre naviguateur normalement) mais pas sur IE, le milieu se place au dessous des deux autres parties qui sont à la bonne place.

S'est peut-être un peu flou mais aucune aperçue est disponnible mais avec les codes vous allez mieux comprendre (et m'aider :lol: ).

HTML

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Index</title> <style type="text/css" media="all"> @import url(style.css); </style> </head> <body> <div id="flash_news_gauche"> </div> <div id="flash_news_droite"> </div> <div id="flash_news"> <marquee Class="Scroller" behavior="scroll" direction="left" width="95%" height="19" scrollamount="4" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">Test</marquee> </div> </body> </html>
CSS

Code : Tout sélectionner

#body { width: 100%; background-color: black; } #flash_news_gauche { background-image: url('images/haut_gauche.jpg'); float: left; height: 31px; width: 197px; } #flash_news_droite { background-image: url('images/haut_droite.jpg'); float: right; height: 31px; width: 12px; } #flash_news { background-image: url('images/haut_centre.jpg'); width: 100%; height: 31px; font: Trebuchet MS; font-size: 1.1em; line-height: -35px; }
Merci d'avance !!!

Administrateur PHPfrance
Administrateur PHPfrance | 3088 Messages

12 sept. 2007, 18:52

Je te conseille de mettre la page en ligne si tu veux maximiser tes chances de recevoir de l'aide. Sinon, reste toujours la solution d'utiliser les "Grids" de YUI

PS: enlève le "width: 100%", ça devrait aider

Eléphanteau du PHP | 28 Messages

12 sept. 2007, 19:17

Merci de ta réponse, et surtout de ton aide.

J'ai regarder la 'YUI' mais je n'ai pas tout comprus (même rien :p ). Sinon j'ai mis ma page en ligne: http://bruno.charcosset.club.fr/test/index.html, essayez sur Mozilla FireFox et Microsoft Internet Explorer vous verrez mon problème :) .

Merci d'avance !

Administrateur PHPfrance
Administrateur PHPfrance | 3088 Messages

12 sept. 2007, 19:46

L'avantage des Grids de Yahoo! c'est que tu n'as pas vraiment à comprendre comment ça marche : http://developer.yahoo.com/yui/grids/builder/

Mais bon, c'est fait pour la mise en page d'un site, pas d'une simple bannière.

As-tu essayé sans le width:100% ?

ViPHP
AB
ViPHP | 5818 Messages

12 sept. 2007, 20:10

Tu peux aussi trouver de nombreux modèles de mise en page ici http://css.alsacreations.com/Modeles-de ... age-en-CSS

Eléphanteau du PHP | 28 Messages

12 sept. 2007, 20:24

Merci pour ovos réponse et vos aide précieuse, je feuilletterais vos lien dans la soirée ou pluot demain et je vous dit si j'ai réussis mon à resolver mon probleme !

Et oui j'ai enlever le "width: 100%" ;).

Merci encore !

Eléphanteau du PHP | 28 Messages

14 sept. 2007, 19:10

[Edit] Voici un lien pour un aperçue du probleme (tester sous IE et FF pour voir le probleme)
http://bruno.charcosset.club.fr/test/index.html[/Edit]

Alors merci beaucoup j'ai présque réolue ce problème d'incompatibiliter !

Maintenant tout fonctionne trés bien, sauf sur IE comme d'habitude... Sauf que s'est pas un trés gros problèmes mais il me met des marge sur les images que je souhaite aligner.

Comment résoudre ce problème ?

Voici mon nouveau code CSS:

Code : Tout sélectionner

#body { background-color: black; width: 100%; } #flash_news_gauche { background-image: url('images/haut_gauche.jpg'); float: left; height: 31px; width: 197px; margin:none; } #flash_news { background-image: url('images/haut_centre.jpg'); height: 31px; font: Trebuchet MS; font-size: 1.1em; line-height: -35px; margin:none; } #flash_news_droite { background-image: url('images/haut_droite.jpg'); float: right; height: 31px; width: 12px; margin: none; }
Mon HTML n'as pas bouger d'un cheveux !

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Index</title> <style type="text/css" media="all"> @import url(style.css); </style> </head> <body> <div id="flash_news_gauche"> </div> <div id="flash_news_droite"> </div> <div id="flash_news"> <marquee Class="Scroller" behavior="scroll" direction="left" width="95%" height="19" scrollamount="4" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">Test</marquee> </div> </body> </html>

Eléphant du PHP | 53 Messages

21 sept. 2007, 01:13

Tu devrai mettre un container et une position relative sur chacune des 3 parties et normalement ça serai nickel sur tous le navigateur
www.theitalianblog.com tout pour Nokia Symbian