Différence IE/Firefox [Résolu]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Différence IE/Firefox [Résolu]

Chris6969

Bonjour,

Alors avant tout je suis un novice totale en matière de programmation web, donc vous risquez de souvent avoir affaire a moi. Jessais dapprendre différents langages et techniques de programmation. Le langage html est le seul que je ne connais pas trop mal sans en être un as.

Alors la je développe un site web mais je rencontre un problème au niveau du navigateur web. En effet lorsque jutilise Internet Explorer la page saffiche normalement tandis quavec Mozilla Firefox il y a quelques légères différences que je narrive pas a résoudre. Je sais que ce problème IE/Firefox revient fréquemment mais je ne suis pas arrivé à le résoudre.

Première différence :
- avec Internet Explorer :

- avec Mozilla Firefox :

Deuxième différence :
- avec Internet Explorer :

- avec Mozilla Firefox :

Code html :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prodatec</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="fr">
<meta name="keywords" content="...">
<meta name="description" content="...">
<link href="fstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.Style1 {
font-size: 18px;
color: #FF6600;
font-weight: bold;
font-style: italic;
}
-->
</style>
</head>
<body>
<div id="grandcadre" >
<table width="150" bordercolor="black" bgcolor="#006198" border="1" >
<tr>
<td><img src="images/ban.gif"></td>
</tr>
</table>
<div id="style2">
<br><br>
<p><center>
<span class="Style1">...Texte...</span><br>
<br><br><br><br>
<a href="presentation/indexpre.htm">- Présentation -</a>
<br><br>
<a href="realisations/indexreal.htm">- Réalisations -</a>
<br><br>
<a href="evenements/indexeven.htm">- Evènements -</a>
<br><br>
<a href="contact/indexcont.htm">- Contact -</a>
<br><br>
</center></p>
</div>
</div>
</body>
</html>

Code CSS :

Code :

body {
background-image:url(images/fond.jpg);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
margin:50px 120px 50px 125px;
border: double;
border-color: #006198;
overflow:visible;
}
#grandcadre {
position:static;
padding:0px;
margin:0px 0px 0px 0px;
}
#style2 {
padding:5px;
}

Moi je voudrais que ça saffiche comme avec IE.

Peut être quil y a du code qui nest pas très "professionnel". Alors si vous remarquez des choses qui ne vont pas merci de me le faire savoir.

Jespère que jai été assez claire.

Merci de votre aide.

Chris

Message édité par Chris6969 le 26-03-2007 à 17:17:22

Publicité

Mxtrem

je ne vois pas pourquoi tu utilises des div pour faire ça, un simple table aurait suffit.

<table cellpadding=0 cellspacing=0 style="width: auto; height: auto; border: 1px #006198 double">
<tr><td>
<table cellpadding=0 cellspacing=0 style="width: auto; height: auto; border: 1px #000000 solid">
<tr><td><img src="images/ban.gif"></td></tr>
</table>
</table>

ps : ne définie pas de choses telles les bordures toussah dans le body

Message cité 1 fois

zecrazytux

ta craqué ?
les tableaux ça puuux !

utilise des divs, et pour tes liens une liste.

le stableaux ne doivent servir qua... faire des tableaux (au sens tableur, pas de mise en forme)

---------------
Blog photo/récits activités en montagne http://planetcaravan.net

Mxtrem

je ne suis pas d'accord, les tableaux evitent bien des problèmes d'incompatibilité entre les divers navigateurs...

zecrazytux

ouai ta raison on va tous coder en tableaux imbriqués, c'est les standards les responsables des problemes de compatibilité.
conanrds de standards :-(

edit: effectivement

Message édité par zecrazytux le 16-02-2007 à 15:49:38

---------------
Blog photo/récits activités en montagne http://planetcaravan.net

rufo

Pas me confondre avec Lycos!

standards avec un d

FlorentG

Unité de Masse

Mxtrem a écrit :

je ne vois pas pourquoi tu utilises des div pour faire ça, un simple table aurait suffit.

Tu craques toi, ou quoi ? [:johneh]

FlorentG

Unité de Masse

Bon là sinon c'est assez simple à faire :

Code :

....
<body>
<div id="conteneur">
<div id="header">
<h1>Prodatec</h1>
</div>
<div id="contenu">
<p>
Texte ici
</p>
<ul id="menu">
<li><a href="presentation/indexpre.htm">- Présentation -</a></li>
<li><a href="realisations/indexreal.htm">- Réalisations -</a></li>
<li><a href="evenements/indexeven.htm">- Evènements -</a></li>
<li><a href="contact/indexcont.htm">- Contact -</a></li>
</ul>
</div>
</div>
</body>

Ton menu est une liste, il faut donc le mettre dans un <ul>. La banière ira en fond du header, dans le h1 y'aura le logo ou le nom de la boîte sous forme de texte. Pour centrer tout le truc, on mettera une taille au conteneur, + la bordure :

Code :

#conteneur {
border: 3px double #006198;
margin: 0 auto;
width: 760px;
}

N'oublie pas de préciser le bon doctype pour que le centrage fonctionne sous IE.
Pour la banière :

Code :

#header {
border: 1px solid black;
}

Rien besoin d'autre...
Et enfin pour ton menu, supprimer les puces et centrer :

Code :

#menu {
list-style-type: none;
}
#menu li {
text-align: center;
}

N'oublie pas de ne jamais utiliser de tableaux pour la présentation, il faut les réserver pour des trucs genre affichage de données statistiques, etc. Attention à bien utiliser les balises pour leur sens, et pas pour leur présentation.

Bref, t'as encore plein de choses à apprendre, mais ça viendra avec l'expérience

zecrazytux

ben voilà
l'a tout maché le florent

---------------
Blog photo/récits activités en montagne http://planetcaravan.net

rufo

Pas me confondre avec Lycos!

un petit tour sur http://css.alsacreations.com/ et ça ira mieux

Publicité

zecrazytux

mxtrem, tu devrais y fair eun petit tours aussi
openweb aussi

---------------
Blog photo/récits activités en montagne http://planetcaravan.net

Chris6969

Oki merci pour vos réponses je verrais ca dimanche dans la soiré car je suis pris tout le week end.

Chris6969

Voila j'ai vraiment pas eu le temps de faire ces modifications avant.
Je les ai effectués et c'est un succès total !! :sol:
De plus le site de Rufo m'a permit de comprendre d'autres choses qui me seront utiles plus tard.

Encore une fois merci a vous tous pour votre aide.

xavior_el_barbor

Bonjour,
Quand vous parlez de bon doctype, c'est lequel qu'il faut mettre ?

FlorentG

Unité de Masse

Un doctype strict par exemple :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(les vrais le tape par coeur )

FORUM HardWare.fr

Programmation

HTML/CSS

Différence IE/Firefox [Résolu]

Sujets relatifs
Probleme de différence firefox/ie	[Ruby] [Resolu] Nettoyage de caractères accentués
[html] mailto + modification adresse mail [Résolu]	probleme d'overflow avec variables type Double [résolu]
VBA - application.match et Majuscules [Résolu]	VUE javais pas vue... [RESOLU]
[CSS] (Résolu) Pourriez-vous tester mon site avec IE6?	Processus métier et règle métier ? c'est quoi la différence ?
[Resolu] Une class sur une "font" pas fonctionnelle sous FF :o
Plus de sujets relatifs à : Différence IE/Firefox [Résolu]

Page générée en 0.064 secondes