Posez votre question Signaler

Css, IE, opéra, firefox [Résolu]

midnnight 354Messages postés 23 février 2006Date d'inscription 24 novembre 2011Dernière intervention - Dernière réponse le 29 juin 2009 à 02:49
Bonjour,
Il y a des moments de grande solitude ! lol.
Quand j'ai eu fini mon css qui fonctionnait super sous IE et Opéra, il m'est venu l'envie de le tester avec firefox et là, c'est la catha !!!
Tout est en vrac sur firefox, voyez vous mon (mes) erreur(s) ???
Merci par avance, j'ai beaucoup boss&é dessus...!!!...
  body
  {
  background:black;
  }
#conteneur
{
   width:auto;
   margin-top:20px;
   padding-bottom:25px;
   background-image:url(images/fond.jpg);
   padding-top:5px;
}

#colonne1
{
   width:180px;
   height:450px;
   background-image:url(imgs/d_g.jpg);
   float:left;
   border: 0px solid green;
}
#colonne1b
{
   width:100%;
   height:160px;
   background-image:url(imgs/boule_g.gif);
   background-reprat:no-repeat;
   float:left;
   border: 0px solid #505F7D;
}
<!-- colonne droite -->
#colonne2
{
   width:180px;
   height:450px;
   background-image:url(imgs/d_g.jpg);
   float:right;
   border: 0px solid green;
}
#colonne2b
{
   width:100%;
   height:160px;
   background-image:url(imgs/boule_d.gif);
   background-reprat:no-repeat;   
   float:right;
   border: 0px solid #505F7D;
}
<!-- header -->
#header
{
   width:100%;
   height:18%;
   background-image:url(imgs/h.jpg);
   float:center;
   border: 1px solid yellow;
}
<!-- center -->
#colonne3
{
   width:100%;
   height:400px;
   background-color:#CCCCFF;
   background-image: url(imgs/tx.jpg);
   float:center;
   border: 1px solid white;
}
#footer
{
width:100%;
Height:10%;
background-image:url(imgs/h.jpg);
margin-top:30%;
font'size:11px;
color:white;
}
Lire la suite 

Css, IE, opéra, firefox »

Suggestions
15 réponses
Réponse
+0
moins plus
le html stp ou mieux la page en ligne
Ajouter un commentaire
Réponse
+0
moins plus
salut,

+ 1000 pour Math 2000, on est pas des voyantes quand même !
-:oD
Ajouter un commentaire
Réponse
+0
moins plus
Mille sorry !!!!

Code ok dans IE and Opéra...
<html>
<!-- Date de création: 25/06/2009 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="midnnight17">
  <meta name="generator" content="WebExpert 6">
  <style type="text/css"> 
  body
  {
  background:black;
  }
#conteneur
{
   width:auto;
   margin-top:20px;
   padding-bottom:25px;
   background-image:url(images/fond.jpg);
   padding-top:5px;
}
 
#colonne1
{
   width:180px;
   height:450px;
   background-image:url(imgs/d_g.jpg);
   float:left;
   border: 0px solid green;
}
#colonne1b
{
   width:100%;
   height:160px;
   background-image:url(imgs/boule_g.gif);
   background-reprat:no-repeat;
   float:left;
   border: 0px solid #505F7D;
}
<!-- colonne droite -->
#colonne2
{
   width:180px;
   height:450px;
   background-image:url(imgs/d_g.jpg);
   float:right;
   border: 0px solid green;
}
#colonne2b
{
   width:100%;
   height:160px;
   background-image:url(imgs/boule_d.gif);
   background-reprat:no-repeat;   
   float:right;
   border: 0px solid #505F7D;
}
<!-- header -->
#header
{
   width:100%;
   height:18%;
   background-image:url(imgs/h.jpg);
   float:center;
   border: 1px solid yellow;
}
<!-- center -->
#colonne3
{
   width:100%;
   height:400px;
   background-color:#CCCCFF;
   background-image: url(imgs/tx.jpg);
   float:center;
   border: 1px solid white;
}
#footer
{
width:100%;
Height:10%;
background-image:url(imgs/h.jpg);
margin-top:30%;
font'size:11px;
color:white;
}
</style>
</head>
<body>
<div id="colonne1">
<div id="colonne1b">
+++</div>
     Hello world!</div>
 
<!-- !!!! -->
   <div id="colonne2">
 
  I try</div>
   <!-- header -->
    <div id="header"><center>  <img src="imgs/PROGYLimgVII.gif" border="0" width="549" height="89" alt=""></center></div>
<!-- center -->   
   <div id="colonne3">
  P0
 
 
 

<div id="footer">ByyyP=Foot,Tenis-man...!</div> 
   </div>
</body>
</html>

Ajouter un commentaire
Réponse
+0
moins plus
re, commence par ajouter une DTD !

+ http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html
Ajouter un commentaire
Réponse
+0
moins plus
Merci pour le lien
(Je ne sais pas si va va suffir...Mais C cool c'est vrai qu'on a tendance à oublier ça, BIEN de le rappeler !)
Ajouter un commentaire
Réponse
+0
moins plus
mets ça en première ligne de ton document :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

moi, je vais me coucher !
Ajouter un commentaire
Réponse
+0
moins plus
Merci beaucoup de ta participation et good night !!!
A+
(idem, je marque résolu dès que testé, bYz, fatigué aussi...à demain.)
Ajouter un commentaire
Réponse
+0
moins plus
Aille, css toujours en vrac dans firefox, avec le "DTD", l'interface c'est amméliorée dans Opéra, mais ça passait bien déjà avant, mais c'est en vrac aussi dans IE 8 maintenant, je retire donc le DTD...
HEEEELP !!!
Et comme un lien vaut mieux qu'1 grand discours ! Le voili, le voila :
http://demostock.lescigales.org/essai3.html
Merci mille fois à vous, je suis présent aujourd'hui, de 14h30 à 16h30 (fête de l"école ensuite, je vais voir mon bout d'choux) puis de retour vers 20h et ce WE sans prob...
Merci par avance, A+++
Ajouter un commentaire
Réponse
+0
moins plus
tu dis qu'il fonctionne sous ie et opéra mais moi j'ai pas le même affichzge sous ie opéra et firefox et safaris
il est différent sous chasue navigateur ton site
il vaut mieux créer son site pour firefox et ensuite l'adapter
Ajouter un commentaire
Réponse
+0
moins plus
salut,

je retire donc le DTD
grosse erreur.
oublie tout ce que tu as fait et repars avec un document valide et propre sinon tu vas courir après de fausses solutions sans pouvoir définir le problème.
Ajouter un commentaire
Réponse
+0
moins plus
Bon, snif, je le reprend à 0 à partir de firefox, et du DTD, si celui-ci n'est pas rattrappable...ffff, j'me suis trop branché php, je m'y retrouve plus dans css du coup, lol,
merci...
(mon Dieu, mais quand feront-ils des navigateurs qui traduisent le même code valide, qu'on s'y retrouve ! Lol !)
Re=>('suis toujours preneur d'idées, au cas où, pour savoir où ça bugg...)
Dalida- 26 juin 2009 à 15:30
suis toujours preneur d'idées, au cas où, pour savoir où ça bugg
c'est justement là le problème !
avec du code valide, les navigateurs ont des rendus différents (ceci dit, maintenant il y a finalement assez peu de différences).
avec du code invalide, c'est encore pire puisqu'on ne sait même pas quel comportement on est censé attendre.
Ajouter un commentaire
Réponse
+0
moins plus
J'ai donc tout repris à Z, c'est beaucoup mieux, mais 2 petits probs, svp :
(pour l'instant je travaile en local)
je voudrais bien comprendre...
'margin-top' ne fonctionne pas sous IE 8 mais fonctionne sous firefox et Opéra.
Par contre sous Opéra et IE 8 mon tableau est inclus dans mon div class="centre" (le 'background-image: url(imgs/tx.jpg); suit mes espaces, donc mon futur texte)
mais pas sous firefox (mon background-image: url(imgs/tx.jpg); s'arrête au milieu de mes espaces (br /) pourtant je l'ai codé à 100%...(?)
Je ne trouve pas mes erreurs...Je ne dois pas tester les bons css...Une petite aide? ce s'rait sympa...
  .centre {
margin: 1em 20%;
background-color:#CCCCFF;
background-image: url(imgs/tx.jpg);
margin-top:1%;
height:100%;
}


le html :
<div class="centre">
<center><table summary="" border="1" background-color"white" width="80%"; height="80%">
                    	<tr>
                    		<td style="margin-left:5px"><br />
blablabla<div class="box-footer">FOOTER<br /></div>
</div>&nbsp;</td>
                    	</tr>
                    </table></center>
<div class="box-footer">footer<br /></div>
&nbsp;</td>
                    	</tr>
                    </table></center></div><!--(mon footer est inclus dans mon tableau, c'est voulu)-->
Ajouter un commentaire
Réponse
+0
moins plus
salut,

bravo pour le redémarrage mais tant qu'à faire tu abandonnerais pas les <tables> ?

tu vas me trouver lourd mais la technique est déconseillée depuis 1999, faudrait s'y mettre…

+ http://www.w3.org/2002/03/csslayout-howto.html.fr

+ http://www.alsacreations.com/tuto/lire/538-Construire-un-site-sans-tableaux.html

+ http://css.mammouthland.net/mise-en-page-sans-tableau.php

+ http://openweb.eu.org/articles/problemes_tableaux

+ http://www.pompage.net/pompe/csspratique/
Ajouter un commentaire
Réponse
+0
moins plus
Oki,
Donc voici mon nouvel aménagement de ce qui est noté au dessus :
  .centre {
margin: 1em 20%;
background-color:#CCCCFF;
background-image: url(imgs/tx.jpg);
margin-top:1%;
height:100%;
}
<!--pied-->
.box-footer
    {

margin-top:10%;
    width:100%;
    Height:40px;
    background-image:url(imgs/h.jpg);
    font-size:11px;
    color:white;	
    }

le html :
<div class="centre">
<center><div style="border solid:1px;background-color:white; width:80%; height:80%"><br />
blablabla<div class="box-footer">footer<br /></div></div>
</center></div><!--(mon footer est inclus dans le div, c'est voulu)-->

Avec mes excuses, le prob venait du fait que j'avais encore oublié le DTD
(promis, je l'fait pas exprès. Bon par contre, du coup j'ai remplacé mon tableau, lol, y'a pas que du mauvais pour ce post...
Merci beaucoup !!! à +++
Ajouter un commentaire
Ce document intitulé « css, IE, opéra, firefox » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?