28173 sujets

CSS et mise en forme, CSS3

Un problème entre IE et FF, mon design change.

Bonjour !

Alors voilà mon problème, comme vous pouvez le voir ci dessous, sous FF, mon CSS est parfait, mais, le même code, sous IE, me déforme la mise en page, et c'est ce que je voudrais régler ici.

http://www.ciberupload.com/uploads/6f923cc469.jpg

Voici mon code CSS et HMTL :

<div id="top" style="background-color:#777777; height:160px; width:800px;">
  <div id="URL"><!-- C'est la div des SpeedDDL et des tomes parus -->
  
    <div id="tomeparus">
	
	<!-- Début des Sorties -->
	
	<p class="titre"> <strong>Japon :</strong> Tome XX<br/> <strong>France :</strong> Tome XX </p>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><p>Japon :</p></td>
    <td><p>France :</p></td>
  </tr>
  <tr>
    <td><img src="menu_partenaire/Japon 2.png"  name="image1" alt="" onmouseover="image1.src='menu_partenaire/Japon.jpg'" onmouseout="image1.src='menu_partenaire/Japon 2.png'" class="tome1" /></td>
    <td><img src="menu_partenaire/France 2.png"  name="image2" alt="" onmouseover="image2.src='menu_partenaire/France.jpg'" onmouseout="image2.src='menu_partenaire/France 2.png'" class="tome" /></td>
  </tr>
</table>

 
    <!-- Fin des Sorties -->
	
	</div>
	
	<div id="speedddl">
	
	<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table class="tablespeed" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="menu/scanlation.png" alt="" /></td>
  </tr>
  <tr>
    <td><p><a href="http://www.narutorpg.fr/accueil.php" class="scanetepisode" >Chapitre 369</a><br/>
	    <a href="http://www.narutorpg.fr/accueil.php" class="scanetepisode" >Chapitre 368</a><br/>
		<a href="http://www.narutorpg.fr/accueil.php" class="scanetepisode" >Chapitre 367</a></p></td>
  </tr>
</table>
</td>
    <td><table class="tablespeed" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="menu/animesetepisode.png" alt="" /></td>
  </tr>
  <tr>
    <td><p><a href="http://www.dailymotion.com/relevance/search/naruto+shippuden+27/video/x2vnxd_naruto-shippuden-27-vostfr-hq_creation" class="scanetepisode" >     Episode 27</a><br/>
	 <a href="http://www.dailymotion.com/relevance/search/naruto+shippuden+26/video/x2w3wo_naruto-shippuden-26-vostfr_blog" class="scanetepisode" >Episode 26</a><br/>
	 <a href="http://www.dailymotion.com/relevance/search/naruto+shippuden+25/video/x2u47n_naruto-shippuden-25-vostfr_blog" class="scanetepisode" >Episode 25</a>
	</p></td>
  </tr>
</table>
</td>
  </tr>
</table>

	
	
	</div>
</div>
	</div>


CSS : 

#tomeparus
{
   width:335px;
   height:130px;
   background-image:url(menu/tomesparus.png);
   margin-top:15px;
   float:left;
}

#tomeparus table
{
   width:140px;
   margin-left:30px;
}

#tomeparus .tome
{
   border:none;
}

#tomeparus .tome1
{
   border:none;
   margin-right:10px;
}


#tomeparus .titre
{
   margin-top:50px;
   float:left;
   margin-left:20px;
}

#tomeparus p
{
   margin-bottom:3px;
   text-align:center;
}

#speedddl
{
   width:335px;
   height:130px;
   background-image:url(menu/speeddowload.png);
   margin-top:15px;
   float:right;
}

#speedddl table
{
   margin-top:17px;
   margin-left:12px; 
   width:140px;
}

#speedddl .tablespeed
{
   border:1px; 
   border-style:solid ;
   border-color:#808080;
   width:140px;
   background-color:#D4D4D4;
}

#speedddl p
{
   text-align:center;
}

.scanetepisode
{
   font-size:11px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#666666;
   text-decoration:none;
}

.scanetepisode:hover
{
   font-size:11px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#999999;
   text-decoration:none;
}


Et je voudrais aussi vous demander quelque chose :

Comment faire pour que mon site ne se déforme pas sous une résolution autre que 1280*1024.

Vous verrez mieux pourquoi en allant sur mon site et en rapetissant votre naviguateur a moitié, ça marche aussic Smiley lol

www.narutorpg.fr/hebi.php

Merci d'avance !
Bonjour,

Diagnostic: abus carabiné de positionnement flottant, mauvais découpage, et donc multiplication peu raisonnable des risques que ça parte en live. Ah oui: et pas de prise en considération de l'extensibilité en hauteur (on a une hauteur fixe de... 2643px, et basta).

Prescription: abattre... euh, aliter le patient, et repartir sur des bases plus saines. Notamment:
- prévoir l'extensibilité en hauteur (ça n'est pas bien compliqué, il suffit de ne pas donner de hauteur fixe et de gérer les éventuels dépassement de flottants);
- utiliser la technique des colonnes factices;
- utiliser les flottants à bon escient (voir le tutoriel sur un design fluide à trois colonnes).

Bonne rémission. Smiley smile
Modifié par Florent V. (05 Sep 2007 - 17:03)
Hmm, pour les bordures sous IE, justement je ne sais pas comment le résoudre, je n'arrive pas à mettre une bordure en image... Si quelqu'un pourait m'aider...

Florent, comment ça j'abuse des flottants ? quels mauvais découpage ?
Et je sais pas si fixer tout pour pas déformer le site à un rapport avec height, j'ai pas compris Smiley decu

Les colonne factices : Jamais entendu parler Smiley sweatdrop Je vais essayer de voir ce que c'est et pour utiliser les flottants à bon escient xD je vois pas pourquoi
Smiley confused

Voilà voilà Smiley ohwell

EDIT : Enfaite, je vais enlever les bordures, apparement c'est seulement ça qui fait planter mon design, a part mon problème avec mes Tomes et Speed Downloads, mais je pense avoir trouver une solution, je vous tiens au courant.
Modifié par K0zoo (05 Sep 2007 - 19:03)
Sujet clos
Aller à