Je suis en train de développer un (petit) site web, et je rencontre, bien évidemment, des problèmes lors du passage Firefox / IE, au niveau du style CSS, et de la position des différents blocs.
Aperçu sous FF : http://cjoint.com/?efpUGVLBlm
Aperçu sous IE : http://cjoint.com/?efpVKdMLh8
J'ai isolé la partie qui pose problème dans mon code HTML :
<body> <div id="global"> <div id="header"> <div><h1>French Lakes and Properties</h1></div> <div id="barnav"> <ul id="nav"> <li><a href="contact.html">Contact</a></li> <li><a href="services.html">Services</a></li> <li><a href="lakes_properties.html">Lakes and Properties</a></li> <li><a href="properties.html">Properties</a></li> <li><a href="lakes.html">Lakes</a></li> <li class="active"><a href="index.html">Home</a></li> </ul> </div> <div id="subtitle"><h2>Lakes and Properties for Sale in France</h2></div> </div> </div> </body>
Puis l'extrait de ma feuille de style :
body
{
margin:0;
text-align:center;
background-color:#369;
}
div#global
{
margin-left:auto;
margin-right:auto;
width:800px;
text-align:left;
}
div#header{
width:800px;
height:auto;
background-color:#c9eaff;
margin: 0;
padding-bottom: 1px;
overflow:auto;
}
h1{
margin-left:10px;
}
h2{
margin-left:10px;
}
div#barnav
{
width:800px;
height:6px;
}
ul#nav
{
list-style-type: none;
padding-bottom: 24px;
border-bottom: 2px solid #369;
margin: 0;
}
ul#nav li
{
float:right;
height:21px;
background-color:#369;
margin: 1px 2px 0 2px;
border: 2px solid #369;
}
ul#nav li.active
{
border-bottom: 2px solid #6cf;
background-color: #6cf;
}
#nav a
{
float: right;
display: block;
color: #fff;
text-decoration: none;
padding: 4px;
}
#nav a:hover
{
background: #6cf;
}
Auriez-vous une idée de la façon d'arranger ça pour avoir un site à peu près compatible avec IE / Firefox ?
Merci d'avance,
arnoc
arnoc