Sujet Précédent Sujet Suivant

[HTML/CSS]Différence de mise en page FF / IE

Résolu/Fermé
arnoc Messages postés 2 Date d'inscription lundi 5 avril 2010 Statut Membre Dernière intervention 5 avril 2010 - 5 avril 2010 à 15:48
arnoc Messages postés 2 Date d'inscription lundi 5 avril 2010 Statut Membre Dernière intervention 5 avril 2010 - 5 avril 2010 à 16:05
Bonjour,

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 : https://www.cjoint.com/?efpUGVLBlm

Aperçu sous IE : https://www.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
A voir également:

1 réponse

Réponse 1 / 1
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
5 avril 2010 à 15:58
Il faut enlever le float:right du #nav a
1
arnoc Messages postés 2 Date d'inscription lundi 5 avril 2010 Statut Membre Dernière intervention 5 avril 2010
5 avril 2010 à 16:05
Merci beaucoup ! Rapide et efficace !

arnoc
0