CSS : ok sous FF pas sous IE et Chrome

**Marchy** · 13/08/2009, 15h43

Bonjour,

Je suis assez débutant (ça sert à rien de mentir vous le verrez bien

).

J'écris ici parce que j'ai un gros souci avec mon code, visiblement. J'ai développé en me basant sur Firefox, mais mon site n'est pas super sous IE ou sous Google Chrome.

Comme je suis un gros débutant (j'ai tout découvert seul), ben je ne sais pas où je fais des bêtises. Pourriez-vous m'ouvrir les yeux sur mes erreurs?

Merci d'avance!

Voici l'url du site: www.infosports.be

**Auteur** · 14/08/2009, 01h33

bonjour et bienvenue

déjà cette syntaxe n'est pas valide XHTML (syntaxe que je vois pour toutes les images du site) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<IMG SRC="Onglet autres.jpg" WIDTH="106px" HEIGHT="25px" BORDER="0px" ALIGN="left" HSPACE="10px" VSPACE="10px">

car :
- balise img en majuscules,
- attributs (height, width, border, hspace etc.) en majuscules : place les dans ta feuille de style ou dans l'attribut style :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="Onglet autres.jpg" style="width:106px; height:25px; border: none;">

par contre pour hspace, vspace et align je ne sais plus leur équivalent CSS

Ensuite, pour les différences Chrome / IE / FF, cela ne peut venir que de la feuille de styles

**Marchy** · 14/08/2009, 01h42

Merci pour cette première réponse!

Je testerai ceci demain matin, car ce soir j'ai fait ma force (ça fatigue d'apprendre autant dans la journée).

Par contre, comment dois-je faire pour placer ceci dans le style (ou dans le css)? Comment y faire référence dans ma page html pour intégrer l'image à la position voulue?

J'aurais dû y penser, que le problème venait du css. Par contre je bloque car je ne comprends pas pourquoi cela donne de si mauvais résultats sur IE et Google Chrome alors que sous Firefox cela a l'air de fonctionner. Je ne sais pas où modifier sans détruire le tout.

Par exemple, j'ai dû placer une marge négative (que je n'ai pas placé dans style.css mais bien dans les balises <style>) pour aligner les cadres de droite de mes pages sur ceux de gauche. Est-ce mauvais? Comment faire alors?

Désolé, cela fait beaucoup de questions, mais l'auto-apprentissage semble avoir ses limites!

**Marchy** · 14/08/2009, 14h20

Voilà j'ai fait les changements de code comme conseillé (uniquement dans la page index pour le moment).

Par contre, sous IE, les onglets "suite" de droite s'alignent toujours une ligne plus bas que ceux de gauche, alors que sous Firefox ils sont bien sur la même ligne.

Quelque chose de mal fait toujours? Si je mets une marge négative pour les onglets de droite, j'imagine que ce sera sous Firefox que j'aurai un problème...? Y aurait-il une solution, au final?

Ou alors, un "bricolage" pour aligner tous les onglets suite dans le coin inférieur droit de chaque cadre, mais je n'y parviens pas non plus.

**vodiem** · 14/08/2009, 23h19

salut Auteur et bienvenu Marchy,

je ne saurais que te recommander de te farcir les tutos sur les css...
parce qu'y a du boulot...

pour le bricolage essaies dans le style des <img> "suite" qui sont décalés:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

position relative; top:-24px;

**Marchy** · 15/08/2009, 01h39

Merci, à mettre directement dans le style de l'image dans le document html je suppose? Enfin si c'est bien ça je le saurai demain matin, donc merci beaucoup

Cela ne va pas changer l'organisation sous Firefox?

Je vais me faire les tutos css, que j'ai par ailleurs déjà un peu regardés

Y a pas de secret, faut le bon codage! Je reviendrai poser si j'ai des questions plus précises ou un code à faire modifier sur lequel je calle

Merci beaucoup pour votre aide précieuse!

FoxLeRenard · 15/08/2009, 12h39

Envoyé par Auteur

bonjour et bienvenue

Bonjour a toi

juste une précision, je voudrais dire qu'en matiére de validitée si je fais valider ce qui suit, tout est OK 100%

Pourquoi,
parceque j'ais retiré les arguments refusés dans cette balise
J' ais rajouté le alt et fermé ma balise />

Le reste devant étre dans un CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test" </title>
<meta http-equiv="content-language" content="fr, en" />
<meta name="expires" content="never" />
<meta name="rating" content="general" />
<meta name="revisit-after" content="10 days" />
</head>
<body><div>
<img src="Onglet-autres.jpg" style="width:106px; height:25px; border: none;" alt="" />
<img src="Onglet-autres.jpg" width="106px" height="25px"  alt="" />
</div></body></html>

Je souligne cela, car j'ais remarqué que certains navigateurs n'aimaient pas style="" et ne lisait alors que le CSS
a l'époque style="" ne passait qu'en IE ... pfff

Pour encore ajouter a ce qui serait mieux j'ais mis "-" dans le nom a la place de l'espace (évitant les %20)

CSS : ok sous FF pas sous IE et Chrome

HTML

Discussions similaires

Partager

Partager