Sujet Précédent Sujet Suivant

CSS/HTML : de Internet Explorer à Netscape

Fermé
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012 - 28 déc. 2011 à 15:22
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012 - 15 janv. 2012 à 14:21
Bonjour,

J'ai récemment créé plusieurs sites en CSS/HTML.
Par simple curiosité, je me suis demandé comment ils rendaient sur Google Chrome et Mozilla.
Et là, je me suis rendu compte, horrifié, que mon site ne ressemblait plus a rien.
Plus aucun arrière plan, tous les textes et contenus étaient affichés à la suite, au lieu d'afficher une colonne contenu a gauche et une sidebar a droite... etc.
Bref, mes sites n'ont plus aucune forme...

C'est pour cela que je fais appel à vous !
J'aimerais connaître les différences entre Internet Explorer et les autres navigateurs tels que Safari, Google Chrome, Firefox...
Principalement sur ces points :
- Taille des div width et height
- Leur position float
- Comment mettre un arriere plan image ou color

Ce sont les informations qui me paraissent le plus utiles en ce moment...

Merci de vos réponses et bonne journée !

A voir également:

19 réponses

Réponse 1 / 19
gardiendelanuit Messages postés 1770 Date d'inscription jeudi 20 décembre 2007 Statut Membre Dernière intervention 19 novembre 2016 264
Modifié par gardiendelanuit le 28/12/2011 à 16:02
Bonjour,
Je crois que les navigateurs interprete sensiblement différement chaques pages de codes ... c'est pourquoi il faut tenir compte de la compatibilité de chaque partie de code pour être sûr d'avoir un résultat équivalent... j'ai par exemple essayé de rajouter sur l'un de mes sites un pointeur de souris avec différentes méthodes... html, css 3 et JS et ça ne marchais pas partout... Faut avoir recours à des astuces souvent.
Après il faut repérer les endroits du code ou tu utilises des méthodes sensibles de ce coté là
0
gardiendelanuit Messages postés 1770 Date d'inscription jeudi 20 décembre 2007 Statut Membre Dernière intervention 19 novembre 2016 264
28 déc. 2011 à 16:04
Sinon pour une image de fond ce que je fais (et je pense que c'est le mieux):
<body background="ton image" ; style="margin:0 ; padding:0 ; ">
0
Réponse 2 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
28 déc. 2011 à 16:42
Oui, ça peut être une bonne solution, mais si je veux changer le bg de tout mon site je suis obligé de faire la modification sur toutes les pages...

Mais où est-ce que je pourrais connaître les compatibilités entre navigateurs ? Parceque j'ai fait des recherches sur Internet qui n'ont pas été très fructueuses...
0
Réponse 3 / 19
gardiendelanuit Messages postés 1770 Date d'inscription jeudi 20 décembre 2007 Statut Membre Dernière intervention 19 novembre 2016 264
28 déc. 2011 à 17:05
A vrai dire, il faut regarder au fur et à mesure que tu codes... les codes JS sont souvent interprétés différement sur les navigateurs... mais la plupart du temps on ne trouve pas de grosses différences sur les div ou autre en html.
Peut-êre qu'il existe un site qui regroupe une partie des différences remarqué entre tel ou tel navigateur.
Sinon pour tes bg tu peux le mettre dans ton css en applicant ça à toutes tes balises body.
0
Réponse 4 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
29 déc. 2011 à 09:33
Oui... J'essayerai de faire ça, mais le problème c'est qu'il n'a pas l'air de se préoccuper de ma feuille de style...

Les "float" "width" et "height" ne sont respectés nulle part...

Et pour les bg de mes div ça marcherait avec "class" ?
0
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
29 déc. 2011 à 09:38
En fait ça fonctionne si pour chaque balise je rajoute "style=" mais ma feuille de style devient totalement inutile si je fonctionne ainsi...
0
ddtddt Messages postés 216 Date d'inscription mardi 1 novembre 2011 Statut Membre Dernière intervention 8 juin 2013 5
29 déc. 2011 à 09:53
attention si tu as une erreur de caractère dans une instruction elle n'est pas interprété.

Est tu sur que ta feuille de style est chargé ?
0
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
29 déc. 2011 à 10:50
Tout est ok parceque ça fonctionne parfaitement avec internet explorer.
Donc ça ne provient pas d'une erreur de carractère ou d'une feuille non chargée.
0
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
29 déc. 2011 à 10:56
A bien y réfléchir, je me demande maintenant s'il n'y a pas une manière différente de charger une CSS avec les navigateurs netscape... puis-ce qu'à priori c'est parcequ'il ne lit pas ou n'interprete pas la feuille de style, puis-ce que cela fonctionne quand je met dans chaque balise "style="...
0
ddtddt Messages postés 216 Date d'inscription mardi 1 novembre 2011 Statut Membre Dernière intervention 8 juin 2013 5
29 déc. 2011 à 16:05
Tu as utilisé quoi pour créer tes site ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 19
snowflake Messages postés 82 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 15 janvier 2012 6
30 déc. 2011 à 05:47
50% du temps ces que le code nes pas valide donc laffichage nes pareil sur aucun navigateur... pour savoir si ton code es valide visite http://validator.w3.org/ .
50% du temps ces que lauteur nutilise pas les bon doctype donc utilise des code html avec des code xhtml copie coller par si par la et laffichageresulte en un brouillon ressemblan a un picaso lolll encore la http://validator.w3.org/ te dira si tu utilise un doctype ou pas.... par curiositer jaimera voir le site web pour voir quel es l'erreur car dab ces ie qui cause le problem mes dans ton cas ie marche bien alors je suis curieux :) un site valide fonctionnera bien sous nimporte kel navigateur a moin que tu utilise css3 car css3 nes pris en charge que par les navigateur modern mes ie 8 et 7 6... ne prennent en charge les css3 genre shadow etc
0
ddtddt Messages postés 216 Date d'inscription mardi 1 novembre 2011 Statut Membre Dernière intervention 8 juin 2013 5
30 déc. 2011 à 09:42
Si le site est fait avec word par exemple je ne suis pas surpris qu'il ne fonctionne qu'avec IE ;-)

Je suis assez d'accord avec toi sauf pour IE ou avec du 100% valide tu as qiand même parfois des surprise d'affichage ;-)
0
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
30 déc. 2011 à 20:11
Ok ! Bah je vais vais mettre les codes de mon site ;)
juste le temps de les récupérer et je les poste...
0
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
30 déc. 2011 à 20:41
Et je viens de tester sur valisator.w3.org... A priori pas de grosses erreurs ... :)
0
Réponse 6 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
30 déc. 2011 à 20:34
Voici ma page html, suivi du css : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- CSS général -->
  <link rel="stylesheet" href="style/style.css"
 type="text/css">
<!-- CSS carousel jQuery -->
  <link rel="stylesheet" href="themes/default/default.css"
 type="text/css" media="screen">
  <link rel="stylesheet" href="themes/pascal/pascal.css"
 type="text/css" media="screen">
  <link rel="stylesheet" href="themes/orman/orman.css"
 type="text/css" media="screen">
  <link rel="stylesheet" href="nivo-slider.css"
 type="text/css" media="screen">
<!-- fin CSS -->
  <title>Index</title>
<?php $date = date("d/m/Y"); $heure = date('H'); $minute = date('i'); ?>
</head>
<body>
<div id="page">
<center><!-- Publicité -->
<div id="ad"><img style=""></div>
<!-- Header -->
<div style="text-align: left;" id="header"><span
 style="font-weight: bold;"></span>
<div
 style="font-family: Helvetica,Arial,sans-serif; text-align: left;"><font
 style="" size="+2"> </font><span
 style="font-weight: bold;">&nbsp;<img
 style="width: 199px; height: 199px;" alt=""
 src="logo.png" align="middle"></span><font
 size="+3">&nbsp;&nbsp;&nbsp;</font><font
 size="+3"> <span style="font-weight: bold;">TITRE
Noir</span> <font size="+2"><span
 style="color: rgb(255, 0, 0);">2e titre rouge</span></font></font></div>
</div>
<!-- Menu -->
<div style="font-family: Helvetica,Arial,sans-serif;"
 id="navig">Accueil - Contact - News</div>
<div id="container">
<div style="text-align: right;"></div>
<!-- Sidebar -->
<div id="sidebar">
<div style="text-align: right;"></div>
<h1 style="text-align: right;"><?php echo''.$date.''; ?>
&nbsp;-<?php echo''.$heure.''; ?>:<?php echo''.$minute.''; ?>&nbsp;</h1>
<h3>Navigation</h3>
Acceuil<br>
Contact<br>
News<br>
Plan du site<br>
<h3>Publicité</h3>
<div id="pub300x250"><img
 style="width: 300px; height: 250px;" alt=""
 src="style/images/pub/300x250.png"></div>
<br>
<h3>Social</h3>
Facebook :<br>
&hearts; j'aime<br>
(désolé pour ça mais j'avais pas de
bouton a mettre ;D)<br>
<h3>Newsletter</h3>
Inscrivez vous en envoyant un mais à notre webmaster dans la
partie Contact du site<br>
<h3>Contactez nous</h3>
nitsuj73@orange.fr
<div id="bas_side"></div>
</div>
<!-- Fin de la sidebar debut du contener -->
<h1>Accueil</h1>
<div id="texte">
<center><!-- CAROUSSEL JQUERY -->
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="http://www.funradio.fr"><img
 src="images/01.png" title="Fun radio - Le son DANCEFLOOR"
 alt=""></a><a href="https://www.deezer.com/fr/"><img
 src="images/02.png" alt=""
 title="Toute votre musique en écoute illimitée partout où vous allez avec Deezer Premium +"></a><a
 href="https://www.google.com/?gws_rd=ssl"><img src="images/03.png"
 title="Google" alt=""></a><img
 src="images/04.png" alt="" title="Photoshop"></div>
</div>
<br>
<!-- Petite photo + présentation -->
<div style="text-align: left;"><img
 style="float: left; width: 107px; height: 107px;" alt=""
 src="style/images/jcwdlogo.png"><?php readfile('contenu/texte_photo_index.txt');?><br>
</div>
<br>
<!-- Deux cadres l'un a coté de l'autre -->
<!-- Gauche -->
<div id="contenu_acc_1"><span style="font-weight: bold;">CADRE
GAUCHE !<br>
</span><br>
Contenu du cadre<br>
</div>
<!-- Droit -->
<div id="contenu_acc_2"><span style="font-weight: bold;">CADRE
DROIT !</span><br>
<br>
Contenu du cadre</div>
<div style="text-align: left;"><br>
<!-- Fin blocs -->
<!-- Série de lignes, "Pour caler" --><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span style="color: rgb(255, 255, 255);">.</span><br>
<br>
<!-- A y est, c'est calé -->
<!-- Bouton + lien -->
<div style="text-align: center;"><button
 onclick="location.href='test.html';"><span><em>Bouton</em></span></button><br>
</div>
<br>
<a href="page.php">
</a></div>
</div>
</center>
</div>
<!-- JQUERY + JAVASCRIPT -->
<script type="text/javascript"
 src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
 src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script><!-- Fin jQ + JAVA -->
</div>
<!-- Footer -->
<div style="text-align: center;" id="footer">Footer
</div>
<!-- Footer -->
<!-- Publicité en dessous du footer -->
<div style="text-align: center;" id="foot_ad"><img
 style="width: 728px; height: 90px;" alt=""
 src="style/images/pub/728x90.png"></div>
</center>
</div>
<!-- Fin -->
</body>
</html>


LE CSS : 

html, body {
background-position: center top;
background-repeat: repeat-x;
color: rgb(0, 0, 0);
background-color: rgb(0, 0, 0);
background-image: url(images/fond_page.png);
margin: 0px;
padding: 0px;
}

h1 { 
text-align : left; 
text-decoration : none; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size : 20px; 
font-weight : bold; 
color : #ffffff; 
background-color : #850000;
background-image : url(images/fond_h1.png);
background-repeat : repeat-x;
line-height: 2.0;
padding-left:10px;
margin: 0;
} 

h2 { 
text-align : left; 
text-decoration : none; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size : 15px; 
font-weight : bold; 
color : #ffffff; 
background-image : url(images/fond_h2.png);
line-height: 2.0;
padding-left:10px;
height: auto;
} 

h3{
text-align : left; 
text-decoration : none; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size : 15px; 
font-weight : bold; 
color : #ffffff; 
background-image : url(images/fond_h3.png);
line-height: 2.0;
padding: 0 0 0 10px;
height: 25px;
width: 300px;
}

#carousel{
width: 620px;
float: left;
}

#ad{
background-color: #000000;
height: 90px;
padding: 5px;
}

#page {
position: center top;
}

#header{
height: 200px;
width: 1022px;
background-image: url(images/head_bg.png);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

#navig{
width: 1022px;
height: 25px;
font-size : 20px; 
background-color: #ffffff;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

#container{
  width: 1022px;
  padding: 0 0 10px 10px;
  border: 0;
  background: #ffffff;
  position: center-top;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

#sidebar{
width: 300px;
padding: 0px 0px 0px 0px;
border: 0;
background: #E0E3E2;
position: right-top;
float: right;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

#sidehead{
width: 300px;
padding: 0px 0px 0px 0px;
border: 0;
background: #E0E3E2;
position: right-top;
float: right;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}


#bas_side{
background-image: url(images/basside.png);
background-repeat: no-repeat;
height: 30px;
width: 300px;
}

#pub300x250{
width: 300px;
}

#texte{
float: left;
text-align : left;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

#contenu_acc_1{
float: left;
width: 270px;
background-color: #850000;
margin-left: 50px;
background-image : url(images/fond_h1.png);
background-repeat : repeat-x;
color : #ffffff; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
padding: 5px;
}

#contenu_acc_2{
float: right;
width: 270px;
background-color: #850000;
margin-right: 50px;
background-image : url(images/fond_h1.png);
background-repeat : repeat-x;
color : #ffffff; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
padding: 5px;
}

#footer{
width: 1022px;
height: 100px;
background-image: url(images/footer.png);
background-repeat: no-repeat;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
  margin-left: auto; 
  margin-right: auto; 


}

#foot_ad{
width: 1022px;
height: 100px;
padding: 5px;
}

button{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
overflow:visible;					
text-align:center;	
white-space:nowrap;	
height:40px;
line-height:38px;			
}

button span, button em{
display:block;
height:40px;
line-height:38px;			
margin:0;
color:#ffffff;
}

button span{
padding-left:20px;
background:url(http://127.0.0.1:8888/test3/style/images/button/button.gif) no-repeat 0 0;
}	

button em{
font-style:normal;
padding-right:20px;
background:url(http://127.0.0.1:8888/test3/style/images/button/button.gif) no-repeat 100% 0;
}
0
Réponse 7 / 19
snowflake Messages postés 82 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 15 janvier 2012 6
30 déc. 2011 à 21:22
ok jai tester sur ie8 firefox 9.0.1 et chrome 16.0.912.63 la seul difference jai remarcker es le background blanc qui napparait pas sous chrome et firefox.... pour regler la solution jai ajouter display:inline-block; dans #container ... mes en gros ca parrait mal sous tou les navigateur tu pourrais faire un screenshot a partir de chez toi et l'héberger sur picdo ou autre pour voir ske ca donne chez toi ? car ces confu dans ma tete quand je vois ca il manke plein dimage ces toujours plus simple de savoir ske tu veux faire exactement pour regler les problem mes on dirait quil manke de container pour contenir les div... alors si tu peux faire un screenshot a partir de la je pourrais voir les erreur car la je vois que du neant :( desoler pour mon francais je suis canadiens et chez moi on parle plus anglais mes bon je me debrouille assez bien pareil :)
0
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
31 déc. 2011 à 15:07
Ok je vais voir pour l'héberger ;)
0
Réponse 8 / 19
snowflake Messages postés 82 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 15 janvier 2012 6
Modifié par snowflake le 30/12/2011 à 21:56
et pour repondre a ta question plus haut... une id es unique et class se repete dans la page ... exemple si tu fait 3 boite de la meme diemnssion qui se repete dans la case tu dois utiliser class car les boite son pas unique elle se repete... si tu ajoute plusieur float dans une meme boite tu dois utiliser display:inline-block; sinon les boite seron decaler meme voir manker le background... pour ajouter une arriere page couleur tu dois utiliser background: #fff; fff pour blanc biensure et pour une image en arriere plan ces background-image: url('liens vers l'image'); ... pour les width et height des div ca devrais bien se passer avec width:100px; et height:100px; qui formera un carrée de 100px par 100px
0
Réponse 9 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
31 déc. 2011 à 15:19
Le site a cette apparence sur internet explorer :
https://imageshack.com/

Et celle là sur mozilla :
https://imageshack.com/
0
Réponse 10 / 19
snowflake Messages postés 82 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 15 janvier 2012 6
31 déc. 2011 à 19:47
ouille ok ca napparait pas comme ca chez moi... mes jvai regarder voir :)
0
Réponse 11 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
2 janv. 2012 à 15:22
Oui c'est parceque je vous ai passé le code "brut" sans inclure les images...
Il va donc chercher directement sur votre ordinateur à un endroit donc, inexistant...
0
Réponse 12 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
3 janv. 2012 à 12:14
Personne d'autre n'a de solution ?
0
Réponse 13 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
4 janv. 2012 à 17:52
Up
0
Réponse 14 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
7 janv. 2012 à 17:27
S'il vous plait ! J'ai besoin d'aide !
0
Réponse 15 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
8 janv. 2012 à 13:33
Up
0
Réponse 16 / 19
snowflake Messages postés 82 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 15 janvier 2012 6
11 janv. 2012 à 22:00
desoler cetait les fete et jai eu de mauvaise nouvelle alors jai pas eu le temps de poster ici... apres avoir regarder jai remarquer plusieur erreur... mes le code nest pas propre et tres dure pour moi... je te sugere de recommencer le code si tu le desire jpeu meme taider a refaire a partir de zero ca devrais pas etre trop long quelque heure... a toi de voir
0
Réponse 17 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
14 janv. 2012 à 11:45
Oui :) Ok pas de soucis...

Oui je veux bien... Mais qu'est ce qui cloche exactement ?
Que faire pour le nettoyer ?
0
Réponse 18 / 19
snowflake Messages postés 82 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 15 janvier 2012 6
15 janv. 2012 à 01:06
la structure en gros ces pas tres claire...
0
Réponse 19 / 19
nitsuj73 Messages postés 21 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 22 avril 2012
15 janv. 2012 à 14:21
Ah... <= réponse constructive et utile
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Que veut dire <p>&nbsp;</p>?
quinn mallory -
prosthetiks -

3 réponses
Balise </br>
erf -
erf -

3 réponses