Sujet Précédent Sujet Suivant

Problème de compatibilité Internet Explorer

Pioo Messages postés 4 Statut Membre -  
Pioo Messages postés 4 Statut Membre -
Bonjour à tous,

Je suis débutante en web. (Comme çà c'est dis ! :p)
Mon patron m'a demandé de réaliser une newsletter, elle apparait très bien sous Firefox, mais sous Internet Explorer, c'est une autre histoire ...

Et puisque des images valent mieux qu'un long discoure :

Voici l'aperçu sous Firefox :
http://www.hostingpics.net/viewer.php?id=774526firefox.jpg

Je met l'accent sur ce qui nous intéresse : la barre de menu, (qui reprend celle du site internet). Ici tout est "normal".

Voici l'aperçu sous IE :
http://www.hostingpics.net/viewer.php?id=281752ie.jpg

D'une part, comme vous le constatez, la barre de menu se "barre en cacahuète" ..si je puis dire.

D'autre part : on constate des espacements entre les éléments, j'ai pourtant bien remis les margin et padding a 0, je l'ai même attribué a toutes mes blocs, mais rien n'y fait.

De plus le tout n'est pas centré sur la page.

Voici le code : 
<style type="text/css"> 
<!--
* {
	margin: 0px;
	padding: 0px;
	}
	
body{
	margin:0px;
        padding: 0px;
	background-color:#e9e8e6;
	
}
	
#global {
	display: block;
	width: 681px;
	margin-right: auto;
	margin-left: auto;
	padding:0;
	margin-top:0;
	margin-bottom:0;
}

#clic {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-align: center;
	display: block;
	width: 681px;
	height: 25px;
	line-height: 25px;
}

#clic a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}

#clic a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
}

#header {
	margin: 0px;
	padding: 0px;
	display: block;
	width: 681px;
}

#menu {
	display: block;
	height: 32px;
	width: 681px;
	background-image: url(images/fond_menu_off.jpg);
	margin: 0px;
	padding: 0px;
}
#menu   #nav {
	display: block;
	margin-left: 5px;
	width: 681px;
	height:32px;
}


#menu a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	text-transform: uppercase;
	background-image: url(images/fond_menu_off.jpg);
	display: block;
	height: 32px;
	line-height: 32px;
	padding-right: 5px;
	padding-left: 5px;
}

#menu li {
	float: left;
	list-style-type: none;
}

#menu a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #990033;
	text-decoration: none;
	text-transform: uppercase;
	background-image: url(images/fond_menu_on.jpg);
	display: block;
	height: 32px;
	line-height: 32px;
	padding-right: 6px;
	padding-left: 5px;
}
#footer {
	display: block;
	height: 110px;
	width: 663px;
	background-color: #334E19;
	margin-left:18px;
}
#image_footer {
	display: block;
	float: left;
	height: 110px;
	width: 98px;
	margin: 0px;
	padding: 0px;
}
#texte_footer {
	display: block;
	width: 565px;
	float: left;
	padding: 0px;
	margin:0px;
}

.mentions {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-align: center;
	margin-top: 10px;
	line-height: 12px;
}
.adresse {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 13px;
	color: #FFFFFF;
	margin-top: 15px;
	text-align: center;
}

}
.mentions_abus {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-align: center;
	margin-top: 15px;
	line-height: 12px;
	margin-bottom: 4px;
}

#texte_footer a {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;

#texte_footer a:hover {
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}




-->
</style>
</HEAD>
<BODY>

<div id="global">

<div id="clic">
si vous ne visualisez pas bien : <a href="http://blablabla.html" target="_blank">cliquez ici</a>
</div>

<div id="header">
<a href="http://" target="_blank"><img src="images/header.jpg" alt="blabla" width="681" height="68" border="0"></a>
</div>

  <div id="menu">
  <ul id="nav">
  <li><a href="http://bla/Bordeaux.html">Bordeaux</a></li>
  <li><a href="http://bla/Bourgogne.html">Bourgogne</a></li>
  <li><a href="http://bla/Valle-Du-Rhone.html">Rhône</a></li>
  <li><a href="http://bla/Autres-Vins.html">Autres vins</a></li>
  <li><a href="http://bla/Armagnac.html">Armagnac</a></li>
  <li><a href="http://bla/Porto.html">Portos</a></li>
  <li><a href="http://bla/Whisky.html">Whisky</a></li>
  <li><a href="http://bla/spiritueux.php">Autres Alcools</a></li>
  <li><a href="http:/bla/Champagnes.html">Champagne</a></li>
  <li><a href="http://bla/Primeurs-2008.html">Primeur</a></li>
  </ul>
  </div>
  
  <div id="titre">
  <a href="http://bla/" target="_blank"><img src="images/titre_vins_aperitif.jpg" alt="bla" width="681" height="80" border="0"></a>
  </div>

	<div id="contenu">
    <a href="http:/bla/" target="_blank"><img src="images/vins-aperitif.jpg" alt="bla" width="681" border="0"></a>
    </div>

	<div id="footer">
    <div id="texte_footer">
    <p class="mentions">Offre valable jusqu'au 30 Juillet 2010, dans la limite des stocks disponibles<br/>
     Si vous ne souhaitez plus recevoir ces informations, merci de nous adresser un e-mail <a href="mailto:desinscription@bla?subject=desabonnement" target="_blank">Cliquer ici</a></p>
      <p class="adresse">Chais à Bordeaux : bla - Bordeaux <br/>
      <a href="mailto:contact@bla.com" target="_blank">contact@bla</a> - Tel : bla</p>
<p class="mentions_abus">&quot;L'abus d'alcool est dandereux pour la santé, sachez consommer avec modération&quot;</p>
      </div>
      <div id="image_footer"><a href="http://www.bla.com/" target="_blank"><img src="http://www.bla_WEB/Newsletter/bla.jpg" alt="bla" width="98" height="110" border="0"></a></div>
</div>
</div>
</body>
</html>


Merci du temps que vous m'accorderez ! ;)

A voir également:

3 réponses

Réponse 1 / 3
Breub62 Messages postés 3452 Statut Membre 369
 
http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297

Tu peux utiliser les hacks css pour contrer les mauvaises interprétations de IE
1
Pioo Messages postés 4 Statut Membre
 
Merci pour le lien je vais pouvoir me cultiver ! ;)
0
Réponse 2 / 3
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Salut.
Ajoute "float:left;" sur "#menu a".
1
Pioo Messages postés 4 Statut Membre
 
Effectivement cela règle mon problème de menu !! c'était tellement simple ! MERCI !! :D
0
Réponse 3 / 3
Pioo Messages postés 4 Statut Membre
 
J'ai également résolu le problème des marges à l'aide de hacks css fourni par Breud62 (un grand merci !) en attribuant des marges négatives seulement à IE.

A présent, une piste pour pouvoir centrer ma page ?
0

Discussions similaires

App explorer Sa sert a quoi ?
Mada_alpha -
SATS_fr -

1 réponse
FOTOSE (allemagne)
lix -
Yves -

13 réponses