N'étant pas un expert en css, je viens solliciter votre aide.
1 - J'ai un rendu différent sous IE et FF. JE comprend pas pourquoi.
sous IE
sous FF
Le code html:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:: Akrosports ::</title>
<link rel="stylesheet" href="../css/style1.css" type="text/css" charset="utf-8" />
<script src="../js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="../js/jquery.innerfade.js" type="text/javascript"></script>
<script src="../js/scripts.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
<p>Jeudi 9 avril 2009 | <a href="#">Login</a> | <a href="#">Ouvrir un compte</a></p>
<div id="recherche">
<input id="inputTop" type="text" name="recherche" value=" rechercher" />
<input type="image" src="../images/akrosports_05.jpg" alt="submit" />
</div>
</div>
<div id="menus">
<ul id="menu">
<li><a href="">ACCUEIL</a></li>
<li><a href="">L'ÉQUIPE</a></li>
<li><a href="">À PROPOS DE NOUS </a></li>
<li><a href="">FORUM</a></li>
<li><a href="">NOUS REJOINDRE</a></li>
<li><a href="">DEVENIR MEMBRE</a></li>
</ul>
</div>
<div id="banner">
<img src="../images/akrosports_16.jpg" alt="banniere" id="featuredImage" />
<img src="../images/akrosports_19.jpg" alt="banniere" id="img1" />
<img src="../images/akrosports_24.jpg" alt="banniere" id="img2" />
</div>
</div>
</body>
</html>
Code : Tout sélectionner
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;background: url(../images/images_01.jpg) repeat-x;
text-align: center;}
/*p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
img{padding:0px 5px 5px 5px}*/
ul, li, img, body, html,p,a
{
margin: 0;
padding: 0;
}
div#container
{
width: 990px;
margin: auto;
}
div#header
{
background: url(../images/akrosports_02.jpg) no-repeat;
width:800px;
height:97px;
margin:auto;
border-bottom: #b0b0b0 1px solid;
}
div#header p
{
padding-left:550px;
padding-top:25px;
font-size: 10px;
color: #454545;
}
div#header #recherche
{
padding-left: 600px;
padding-top: 5px;
}
#inputTop
{
font-size: 10px;
color: #454545;
width:150px;
margin-top:0px;
}
#menus
{
width:800px;
height:28px;
margin:auto;
/* border:#b0b0b0 1px solid;*/
background:url(../images/akrosports_18.jpg) repeat;
}
#menu
{
float:left;
width:100%;
}
#menu li
{
display:inline;
float:left;
width:130px;
height:25px;
text-align:left;
list-style-type: none;
background:url(../images/akrosports_17.jpg) no-repeat;
}
#menu li a
{
text-decoration: none;
color:#222222;
text-align:left;
font-weight:300;
font-size:10px;
padding:7px;
}
#menu li:hover
{
}
#menu a:hover
{
text-decoration: none;
color:#ffffff;
text-align:left;
padding-top:2px;
font-weight:300;
background:url(../images/akrosports_10.jpg) no-repeat;
}
#menu li a:active
{
text-decoration: none;
color:#ffffff;
background:url(../images/akrosports_10.jpg) repeat-x;
width:100%;
text-align:left;
font-weight:bold;
}
div#banner
{
width:990px;
height:150px;
BORDER-BOTTOM: #b0b0b0 1px solid;
}
