Arrache de cheveux cause css et mozilla

[renobijoux]

Boujour,

je viens demander de l'aide parce que je n'ai plus de cheveux à force de me les arracher lol

Je commence une nouvelle version de mon site, je le refai tout doucement en css.

Voila mon problème. J'ai commencer l'entete de mon site, tout s'affiche correctement dans IE.

Avec Firefox il y a un problème sur un DIV. Je ne sais plus quoi faire, je me demande si c'est parce que ce div est en position aboslue ou quoi.
Bref voici le css :

Code: Tout sélectionner

body{text-align:center}
div#container{width:1200px; margin:0 auto; border: 0; text-align: left; }
div#header { height:130px; background: #EEE;color: #79B30B; width: 995px; margin: 0 auto;  border: 0; }
div#headerbas { height:32px; background: #EEE;color: #79B30B; width: 995px; margin: 0 auto;  border: 0; background-image: url(images/fondentete.gif); position:relative }
div#arrondiheader {   position: absolute; right:0; width: 15px; height:32px }

et voici le HTML :

Code: Tout sélectionner

<div id="container">
<div id="header"><a title="www.renobijoux.com, sp&eacute;cialiste du bijoux,bague,pendentif,collier,bracelet,boucles d'oreilles,argent,plaqu&eacute; or,acier,or" href="http://www.renobijoux.com"><img src="/images/entete1.jpg" width="744" height="130" border="0" alt="www.renobijoux.com, sp&eacute;cialiste du bijoux,bague,pendentif,collier,bracelet,boucles d'oreilles,argent,plaqu&eacute; or,acier,or" /></a><img src="/images/entete2.gif" alt="Qualité" width="251" height="130" /><div id="headerbas"><a href="http://www.renobijoux.com"><img src="/images/entete3.gif" alt="logo" width="123" height="32" border="0" /></a><a href="http://www.renobijoux.com"><img src="/images/boutonaccueil.jpg" width="63" height="32" border="0"></a><a href="/bijoux-homme.htm"><img src="/images/boutonhomme.gif" width="70" height="32" border="0"></a><a href="/bijoux-femme.htm"><img src="/images/boutonfemme.gif" width="71" height="32" border="0"></a><a href="/bijoux-enfant.htm"><img src="/images/boutonenfant.gif" width="76" height="32" border="0"></a><img src="/images/boutonpanier.jpg" width="54" height="32"><div id="arrondiheader"><img src="/images/coinentete.jpg" width="15" height="32" class="arrondiheader"></div>
</div>

</div>

</div>

faite l'essai, normallement dans IE totu s'affiche correctement, mais avec mozilla j'ai un calque, celui qui fait l'arrondi du tableau en bas à droite qui ne se place pas correctement et je ne vois pas pk.

Sinon j'ai une autre question, j'utilise dreamweaver pour coder tout sa, j'ai remarqué que dans la partie code quand je fais un retour à la ligne, le css l'interprete comme un espace. Du coup cela fausse l'affichage.
par exemple si je fais

Code: Tout sélectionner

<div>texte 1></div><div>texte 2</div>

La il n'y pas le problème. Mais si je fais :

Code: Tout sélectionner

<div>texte 1></div>
<div>texte 2</div>

il me fera un espace entre les 2 divs, et cela me gène quand je scripte dans dreamweaver car tout le code apparait en bloc.

Voila je sais bcp de question mais je ne m'en sors plus lol

Merci d'avance.

[st-antigone]

Bonjour,

Peux-tu nous donner l'url de la page qui débloque ?

à plus

[renobijoux]

Bien sur c'est http://www.renobijoux.com/indexcss.php

Merci

[hollenfurst]

n'étant pas non plus un spécialiste voici ma solution testée sous ie6 et ff 2.0.0.14

Code: Tout sélectionner

<style type="text/css">
body{text-align:center}
div#container{
   width:1200px;
   margin:0 auto;
   border: 0;
   text-align: left;
}
div#header{
   height:130px;
   background: #EEE;
   color: #79B30B;
   width: 995px;
   margin: 0 auto;
   border: 0;
}
div#header img{
   float: left;
}
div#headerbas{
   height:32px;
   background: #EEE;
   color: #79B30B;
   width: 995px;
   margin: 0 auto;
   border: 0;
   background-image: url(images/fondentete.gif);
}
.gauche{
   float: left;
}
.droite{
   float: right;
}
</style>


Code: Tout sélectionner

<div id="container">
   <div id="header">
      <a title="www.renobijoux.com, spécialiste du bijoux,bague,pendentif,collier,bracelet,boucles d'oreilles,argent,plaqué or,acier,or" href="http://www.renobijoux.com/"><img src="indexcss.php_fichiers/entete1.jpg" alt="www.renobijoux.com, spécialiste du bijoux,bague,pendentif,collier,bracelet,boucles d'oreilles,argent,plaqué or,acier,or" border="0" height="130" width="744"/></a>
      <img src="indexcss.php_fichiers/entete2.gif" alt="Qualité" height="130" width="251"/>
   </div>
   <div id="headerbas">
      <div class="gauche">
         <a href="http://www.renobijoux.com/"><img src="indexcss.php_fichiers/entete3.gif" alt="logo" border="0" height="32" width="123"/></a>
         <a href="http://www.renobijoux.com/"><img src="indexcss.php_fichiers/boutonaccueil.jpg" alt="" border="0" height="32" width="63"/></a>
         <a href="http://www.renobijoux.com/bijoux-homme.htm"><img src="indexcss.php_fichiers/boutonhomme.gif" alt="" border="0" height="32" width="70"/></a>
         <a href="http://www.renobijoux.com/bijoux-femme.htm"><img src="indexcss.php_fichiers/boutonfemme.gif" alt="" border="0" height="32" width="71"/></a>
         <a href="http://www.renobijoux.com/bijoux-enfant.htm"><img src="indexcss.php_fichiers/boutonenfant.gif" alt="" border="0" height="32" width="76"/></a>
         <img src="indexcss.php_fichiers/boutonpanier.jpg" alt="" height="32" width="54"/>
      </div>
      <div class="droite">
         <img src="indexcss.php_fichiers/coinentete.jpg" alt="" height="32" width="15"/>
      </div>
   </div>
</div>

attention c'est un code a la vas vite mais si cela peux t'aider

[renobijoux]

Sa fonctionne, je te remercie pour le coup de main.

je vais comparer les 2 codes pour voir ce qui n'allaient pas.

Merci encore

[renobijoux]

Quoi que sur IE il y a un problème d'image d'arrière plan que mozilla n'a pas.

Vraiment il y a toujours un problème en passant de l'un à l'autre.

[hollenfurst]

au hasard essaye en ajoutant le background image de header bas au niveau du droite et hauche

[renobijoux]

non, j'ai trouvé d'ou viens le problème.

C'est un problème d'espace dans le code html.

J'avais écris mon code comme cela par exempel :

Code: Tout sélectionner

<img src="image1.jpg">
<img src="image2.jpg">

Donc cela me génère un espace entre les 2 images.

tandis que comme sa :

Code: Tout sélectionner

<img src="image1.jpg"><img src="image2.jpg">

Cela ne cré pas d'espace entre les 2 images.

Du coup sa fonctionne mais si je fais des kilomètre de code cela ne sera franchement pas lisible.

Je n'ai toujours pas trouver de solution à cela.[/code]