SiteWeb: tt est decalé sur Firefox

Résolu
yonis5555 -  
Bonjour,

J'ai crée un site quand je le test sur IE tout marche bien... Quand je test sur firefox tt est decale.. est-ce que quelqu'un aurait une solution pr que tout marche bien? Merci d'avance...
Configuration: Windows XP
Internet Explorer 7.0

8 réponses

  1.  Tiller
    Tu le trouves comment mon wallpaper?
    Edit: Aaah mince, j'ai oublier de te donner l'image

    Bref, pièce de théatre a part, si on avait ton site ou ton code sa nous aiderait :x
    0
    1. yonis5555 Auteur
      :) c'est vrai c'est bete... je le mets tt de suite... tt dabor voici le probleme... regarde le cadre "abonnez vous"

      sur IE : http://rapidshare.com/files/97441635/ie.jpg.html
      sur Mozilla: http://rapidshare.com/files/97441998/firefox.jpg.html

      extrait du code HTML: 
      <div id="header">
	  
  <div class="small">
			
	  </div>
	  <a href="index.html"><img src="images/logo1.jpg" alt="Accueil" width="403" height="90" class="logo" /></a>
		<table width="362" height="90" border="0">
        <tr>
          <td><img src="images/abonnements.gif" width="361" height="77"></td>
        </tr>
      </table></div>
      0
      1. Tiller
        C'est pas en te montrant 1px de mon wallapaper que tu me diras si il est bien ou pas :x:
        Le code entier m'arrangerais ..
        Et met pas sur rapidshare °°
        0
        1. yonis5555 Auteur
          c'est vrai... voila le code entier:

          Code HTML:           
          <html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<div id="header">
	  
  <div class="small">
			
	  </div>
	  <a href="index.html"><img src="images/logo1.jpg" alt="Accueil" width="403" height="90" class="logo" /></a>
		<table width="362" height="90" border="0">
        <tr>
          <td><img src="images/abonnements.gif" width="361" height="77"></td>
        </tr>
      </table></div>
<div class="menu">
		<ul>
			<li><a href="#"><img src="images/bttn.gif" alt="" width="101" height="17" /></a></li>
			<li><a href="#"><img src="images/bttn.gif" alt="" width="97" height="17" /></a></li>
			<li><a href="#"><img src="images/bttn.gif" alt="" width="128" height="17" /></a></li>
			<li><a href="#"><img src="images/bttn.gif" alt="" width="95" height="17" /></a></li>
			<li><a href="#"><img src="images/bttn.gif" alt="" width="88" height="17" /></a></li>
			<li><a href="#"><img src="images/bttn.gif" alt="" width="73" height="17" /></a></li>
			 
			 <li><a href="#"><img src="images/bttn.gif" alt="" width="95" height="17" /></a></li>
  </ul>
</div>
<div id="content">
		<div class="left">
			<img src="images/title1.gif" alt="" width="154" height="24" /><br />
			<ul>
				<li><a href="#"><img src="images/li1_1.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_2.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_3.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_4.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_5.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_6.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_7.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_8.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_9.gif" alt="" width="154" height="30" /></a></li>
				<li><img src="images/li_line.gif" alt="" width="154" height="30" /></li>
				<li><a href="#"><img src="images/li1_10.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li1_11.gif" alt="" width="154" height="32" /></a></li>
			</ul>
			<img src="images/title1.gif" alt="" width="154" height="24" /><br />
			<input type="text" value="enter your e-mail" /><button> </button>
		</div>
<div class="center">
			<img src="images/big_couvs.jpg" alt="" width="382" height="246" />
			<div class="block">
				<img src="images/title2.gif" alt="" width="359" height="24" /><br />
				<div class="item border">
					<img src="images/item1.jpg" alt="" width="142" height="110" class="flleft" />
					<p><strong>Sed do eiusmod tempor incididunt</strong> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br />
					<strong>PRICE: <span>159$</span></strong></p>
				</div>
				<div class="item">
					<img src="images/item2.jpg" alt="" width="211" height="117" class="flright" />
					<p><strong>Lorem ipsum dolor </strong> Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in.<br />
					<strong>PRICE: <span>500$</span></strong></p>
				</div>
			</div>
		</div>
		<div class="left">
			<img src="images/title3.gif" alt="" width="154" height="24" /><br />
			<input type="text" /><button> </button>
			<a href="#" class="search">ADVANCED SEARCH</a>
			<img src="images/title4.gif" alt="" width="154" height="24" /><br />
			<div class="flags">
				<a href="#"><img src="images/flag1.jpg" alt="" /></a>
				<a href="#" class="bord"><img src="images/flag2.jpg" alt="" /></a>
				<a href="#"><img src="images/flag3.jpg" alt="" /></a>
			</div>
			<img src="images/title5.gif" alt="" width="154" height="23" />
			<ul>
				<li><a href="#"><img src="images/li2_1.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li2_2.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li2_3.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li2_4.gif" alt="" width="154" height="30" /></a></li>
				<li><a href="#"><img src="images/li2_5.gif" alt="" width="154" height="30" /></a></li>
			</ul>
			<img src="images/title6.gif" alt="" width="154" height="22" class="top" /><br />
			<select>
				<option>US Dollar</option>
				<option>US Dollar</option>
				<option>US Dollar</option>
				<option>US Dollar</option>
			</select>
			<img src="images/banner.jpg" alt="" width="193" height="61" class="banner" /><br />
		</div>
	</div>
	<div id="footer">
		<div class="copy">
			<p>Copyright © 2008. </p>
			<p> All rights reserved. </p>
		</div>
  <ul class="bottom">
			<li><a href="#"><img src="images/spacer.gif" alt="" width="77" height="29" /></a></li>
			<li><a href="#"><img src="images/spacer.gif" alt="" width="83" height="29" /></a></li>
			<li><a href="#"><img src="images/spacer.gif" alt="" width="72" height="29" /></a></li>
			<li><a href="#"><img src="images/spacer.gif" alt="" width="75" height="29" /></a></li>
			<li><a href="#"><img src="images/spacer.gif" alt="" width="76" height="29" /></a></li>
			<li><a href="#"><img src="images/spacer.gif" alt="" width="81" height="29" /></a></li>
			<li><a href="#"><img src="images/spacer.gif" alt="" width="45" height="29" /></a></li>
		</ul>
	</div>
</body>
</html>


          Feuille de Style CSS: 
          *{
margin:0px;
padding:0px
}
img{border:0px}
html{
width:100%;
height:100%;
text-align:center;
background-color:#26292E
}
body{
width:778px;
margin:auto;
position:relative;
text-align:left;
}
#header{
	background-image:url(images/bg.jpg);
	background-position:left top;
	background-repeat:no-repeat;
	height:134px;
	text-align:right;
	width:778px;
	float:left;
}
.small{
text-align:right;
padding:15px 20px 0 0;
height:29px;
width:758px
}
.small a{
font-family:Arial;
font-size:9px;
color:#E4E4E4;
text-decoration:none;
margin:-1px 12px 0 12px;
}
.small a:visited{text-decoration:none}
.small a:hover{text-decoration:underline}
.small, .small img, .small a{
float:right
}
.logo{
float:left;
vertical-align:bottom
}
#header p{
font-family:Tahoma;
font-size:11px;
color:#7E7E7E;
padding:40px 35px 0 0;
float:right
}
#header p span{
color:#FDAD24
}
.menu{
background-image:url(images/menu_bg.jpg);
background-position:top left;
background-repeat:repeat-x;
float:left;
width:778px;
height:46px
}
.menu ul{
	display:block;
	float:left;
	padding:12px 0 0 49px
}
.menu li{
list-style-type:none;
float:left
}
.left{
width:173px;
padding:12px 0 0 20px;
float:left;
}
.left ul{
margin:11px 0 24px 0;
float:left
}
.left li{
list-style-type:none;
}
.left li, .left li img{
float:left;
clear:both
}
.left input{
width:112px;
height:15px;
margin:20px 4px 18px 0;
float:left;
border:1px inset;
font-family:Tahoma;
color:#484848;
font-size:10px;
padding:0 0 0 5px
}
.left button{
width:31px;
height:18px;
background-image:url(images/go.gif);
background-position:top left;
background-repeat:no-repeat;
border:0px;
cursor:pointer;
cursor:hand;
float:left;
margin:20px 0 0 0;
}
.center{
background-color:#494949;
padding:0 5px 1px 5px;
float:left;
width:382px
}
.block{
background-color:#FFFFFF;
margin:6px 0 1px 0;
width:360px;
padding:14px 11px 9px 11px;
float:left
}
.item{
width:360px;
font-family:Tahoma;
font-size:11px;
color:#000000;
float:left;
}
.flleft{float:left}
.flright{
float:right;
margin:0 0 0 20px
}
.item  p{padding:10px 0 0 0;}
.item span{
color:#FCAD24
}
.border{
border-bottom:1px solid #7F7F7F;
margin:0 0 9px 0;
}
.search{
display:block;
float:left;
font-family:Tahoma;
font-size:10px;
color:#9C9C9C;
text-decoration:underline;
margin:-10px 0 15px 0
}
.search:hover{text-decoration:none}
.flags{
margin:16px 0 24px 0;
text-align:center;
float:left;
padding:0 0 0 9px
}
.flags a{
padding:0 12px 0 12px;
float:left
}
.bord{
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF
}
.left select{
width:150px;
height:18px;
margin:20px 4px 18px 0;
float:left;
border:1px inset;
font-family:Tahoma;
color:#484848;
font-size:10px;
padding:0 0 0 5px
}
.top{
margin:-6px 0 0 0
}
.banner{
margin:10px 0 0 -20px
}
*html .banner {margin:-1px 0 0 -20px}
#content{
float:left;
}
#footer{
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:repeat-x;
height:82px;
width:778px;
float:left;
}
.copy{
	font-family:Arial;
	font-size:10px;
	color:#8A8A8A;
	width:120px;
	float:left;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 20px;
}
.bottom{
display:block;
margin:32px 0 0 105px;
float:left
}
.bottom li{
list-style-type:none;
float:left
}
.abts {
	height: 77px;
	width: 361px;
	padding-right: 403px;
}


          Merci...

          PS: Le site est en construction dc le texte c'est du charabia pour l'instant
          0
          2. Tiller 
            <table width="362" height="90" border="0">
        <tr>
          <td><img src="images/abonnements.gif" width="361" height="77"></td>
        </tr>
      </table>


            met sa a la place du table: 
            <img src="images/abonnements.gif" width="361" height="77" style="margin-top: 6px">


            Et au fait, ta page est complétement foireuse sur ie ^^
            A partir d'une certaine résolution, tout foire. Des que la largeur dépasse les 1200px sa décale tout.
            http://imagepaste.net/images/ie.png
            0
            1. yonis5555 Auteur
              bizar....
              http://imagepaste.net/images/site.jpg
              en 1280x1024

              une idee pour que ca ne decale pas en 1440x900?

              Merci..
              0
              1. Bibi69
                oula un site de ces dimensions je n'irais pas le voir
                ai un ecran 800 x 600 ........
                essaies de rester dans le raisonnable et ca marchera mieux :)
                0
                1. yonis5555 Auteur
                  je sais... mais c'est bon c'etait juste par rapport a la reponse precedente....
                  0
              2. yonis5555 Auteur
                c'est bon ca marche merci !

                ce que j'ai fait:

                a la place de : 
                <table width="362" height="90" border="0">
        <tr>
          <td><img src="images/abonnements.gif" width="361" height="77"></td>
        </tr>
      </table>


                j'ai mis : 

                <img src="images/abonnements.gif" width="361" height="77" style="margin-top: 6px">
                0