28220 sujets

CSS et mise en forme, CSS3

[ RESOLU & important à savoir] "absolute" entre IE et

Bonjour,

J'ai un menu avec onglets que je n'arrive pas à positionner en absolu sous internet explorer.

Ce qui est incroyable, c'est que ça a parfaitement marché jusqu'à hier. Puis j'ai voulu éclaircir ma feuille de style puis pfffuittt !!! décalage ... je galère depuis hier. Et je n'y arrive pas.

J'aurais franchement besoin d'un bon coup de main Smiley smile Il s'agit du menuonglet

<div id="header"><a href="http://www.sxmsaintmartin.com/island/contact.php"><img src="banieres/ban_pub2.gif" id="imgban" width="468" height="60" alt="saint martin complete guide - index" /></a> 
  <a href="http://www.island.sxmsaintmartin.com/"><img src="images/logo.jpg" id="imglogo" width="190" height="113" alt="st martin island complete guide" /></a> 
  <img src="images/logo2.jpg" id="imglogo2" alt="Back to st martin's website homepage" /> 
  <a href="http://www.sxmsaintmartin.com/"><img src="images/francais.png" id="imgfr" width="25" height="25" alt="French version" /></a> 
  <a href="http://www.island.sxmsaintmartin.com/"><img src="images/anglais.png" id="imgen" width="25" height="25" alt="English version" /></a> 
  <ul id="menu1">
    <li id="M11"><a title="St martin map" href="http://www.island.sxmsaintmartin.com/map.php">Map 
      of st martin</a>&nbsp;|&nbsp;</li>
    <li id="M12"><a href="http://sxmsaintmartin.com/forum/" title="st martin forum">Forum</a></li>
    <li id="M14"><a href="http://sxmsaintmartin.com/website_map.php">Site map</a></li>
    <li id="M13"><a href="http://sxmsaintmartin.com/contact/" title="contact sxmsaintmartin.com">Contact</a>&nbsp;|</li>
  </ul>
  <ul id="menuonglet">
    <li id="ongletselect"><a href="http://island.sxmsaintmartin.com/">Welcome</a></li>
    <li><a href="http://www.island.sxmsaintmartin.com/hotel/">Hotel</a></li>
    <li><a href="http://www.island.sxmsaintmartin.com/restaurant/">Restaurant</a></li>
    <li><a href="http://www.island.sxmsaintmartin.com/rental/">Rental</a></li>
    <li><a href="http://www.island.sxmsaintmartin.com/beach/">Beach</a></li>
    <li><a href="http://www.island.sxmsaintmartin.com/shopping/">Shopping</a></li>
    <li><a href="http://www.pulp.sxmsaintmartin.com/index_en.php">Nightlife</a></li>
  </ul>
  <ul id="date">
    <li id="horloge"></li>
    <li id="ejs_server_heure"></li>
    <li id="moteur2"> 
      <form name="tjs_search" method="get" action="/search2.html">
        <input name="mot" size="15" maxlength="35" value="keyword" onfocus="if (this.value=='keyword') {this.value=''}" onblur="if (this.value==''){this.value='keyword'}" />
        &nbsp; 
        <input type="button" name="bouton" value="Go !" onclick="TJS_Search(this.form)" />
      </form>
      &nbsp;&nbsp;&nbsp;</li>
    <li id="moteur1">Search in <u>saint martin</u> website&nbsp;</li>
  </ul>


et pour la feuille de style

DIV#header {
	height: 168px;
	width: 100%;
	background-image: url(images/fd_header.jpg);
	margin: 0px;
	padding:0;
	background-repeat: repeat;
}
UL#menu1 {
	height: 30px;
	margin: 0px 0px 0px 10px;
	padding:0;
	width: 98%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #CCFFFF;
	font-weight: bold;
	text-decoration: none;
	line-height: 25px;
	display: block;
}
ul#menu1 li a {
	height: 30px;
	margin: 0px;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #CCFFFF;
	font-weight: bold;
	text-decoration: none;
	line-height: 25px;
}
ul#menu1 li#M11 { float: left; display: block; height: 30px; width: 120px; text-align: left }
ul#menu1 li#M12 { float: left ; display: block; height: 30px; width: 80px; text-align: left }
ul#menu1 li#M13 { float: right; display: block; height: 30px; width: 70px; text-align: center }
ul#menu1 li#M14 { float: right ; display: block; height: 30px; width: 57px; text-align: left }
#imglogo { position: absolute; top: 25px; left: 0px; z-index: 1; border: 0px; }
#imglogo2 { position: absolute; top: 55px; left: 120px; z-index: 1; border: 0px; height: 39px; width: 235px;}
#imgban { position: absolute; top: 36px; left: 40%; z-index: 1; border: 0px; }
#imgfr { position: absolute; top: 0px; left: 315px; z-index: 1; border: 0px; }
#imgen { position: absolute; top: 0px; left: 350px; z-index: 1; border: 0px; }
ul#menuonglet {
	position: absolute;
	height: 30px;
	width: 560px;
	text-align: center;
	left: 151px;
	top: 96px;
	vertical-align: top;
}
ul#menuonglet li {
	float: left;
	background-image: url(images/bouton.gif);
	list-style-type: none;
	margin:0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #CCFFFF;
	height: 30px;
	vertical-align: top;
}
ul#menuonglet li#ongletselect {
 float: left;
  background-image: url(images/bouton_accueil_ap.gif) ;
	list-style-type: none;
	margin:0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #CCFFFF;
	height: 30px;
}
ul#menuonglet li a {
	display: block;
	height: 30px;
	width: 80px;
	color: #CCFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-decoration: none;
	line-height: 30px;
	font-weight: normal;
}
UL#date { position: absolute; height: 30px; margin: 0px; padding:0; width: 98%; font-family: "Trebuchet MS"; font-size: 15px; color: #FFFFFF; left: 10px; top: 142px; }
ul#date li a { float: left ; font-family: "Trebuchet MS"; font-size: 15px; color: #FFFFFF; text-decoration: none; line-height: normal; font-weight: normal; }
ul#date li#horloge { float: left ; display: block; height: 30px; width: 176px; }
ul#date li#ejs_server_heure { float: left ; display: block; height: 30px; width: 180px; }
ul#date li#moteur1 { float: right ; display: block; height: 30px; width: 220px; text-align: center; }
ul#date li#moteur2 { float: right; display: block; height: 30px; width: 180px; text-align: left; line-height: 20px; }


le lien ici
Modifié par chooky (21 Jun 2005 - 16:05)
Salut,

Tu t'es fait avoir par les marges par défaut de FF et je suppose que tu as d'abord conçu ta mise en page sous FF avant de regarder sous IE, pas vrai ?

Remet à 0 les marges et paddings de ton ul#menuonglet et tu verras que le rendu est alors identique sur les deux navigateurs. Il ne te restera plus qu'à corriger ton positionnement et le tour sera joué Smiley cligne

Pour éviter ce genre de souci, installe toi l'extension Web developer et désactive les styles par défaut pour voir si ta page reste correcte.

Bon dimanche sinon !

edit : petite erreur dans ton html, ton div est identifié "contener" alors que c'est "conteneur" dans ta CSS...mais ça n'a pas d'influence ici.
Modifié par Nilpohc (19 Jun 2005 - 13:17)
Nilpohc !!! Tu es grand !!!

C'était exactement ça... SNIF !!! Tellement de temps perdu pour un margin et un padding.

Merci beaucoup.

Je vais de ce pas zyeuter le contener et conteneur Smiley jap
Sujet clos
Aller à