créer un site


Décalage de menu sur IE

Aller à la page 1, 2  Suivante
Poster un nouveau sujet sur css   Répondre au sujet à css:Décalage de menu sur IE    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 08-05-2006 12:05

j'ai mon menu qui se décale sur IE alors que cela fonctionne correctement sur firefox (comme d'hab..)

quelqu'un aurait-il une idée ??

le site : http://experimental-light.nuxit.net [http://experimental-light.nuxit.net]

la feuille de style : feuille [http://experimental-light.nuxit.net/templates/experimental-light/css/template_css.css]
gcyrillus
frontpage mioche
frontpage mioche
MessageDécalage de menu sur IE , Posté le: 09-05-2006 18:46

bonjour,

je viens de jeter un oeil au code, premiere chose que je ne comprends pas , le menu ?!
une liste sans liste qui contient une liste avec sa liste et ses liens ,
Code:
... <ul id="navlist"><ul id="mainlevel-nav"><li><a ...
, deja la y'a un truc qui cloche Smile .

Ensuite un peu plus loin on voit des style dans la section body de la page !? pourquoi ne pas mettre les styles dans un fichier externes une fois pour toutes , plurtot que de devoir les rechargé a chaque page ??

Je me suis arreté la, car devant ces plusieurs "problemes" le defaut d'affichage dans IE devient secondaire.
Neanmoins IE et FF n'ont pas les même marges par defaut sur les listes, l'un applique des marges interieurs et l'autre exterieurs, et ne positionnent pas les puce au même "endroit" ... etc ....

Peut-etre que de passer la page au validateur te permettrait de rlever les premiers defaut au niveau html puis css eventuellement.

++
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 10-05-2006 9:24

c'est un cms que j'utilise c'est pour ça les styles dans body ne font pas partie de mon template. Le menu est en css, c'est une solution employé sur un autre template, donc je dois trouver une solution dans la feuille de style :

Code:

<body>
<table width="80%" border="0" align="center" class="table_total">
  <tr>
    <td width="280" height="105"><div id="navcontainer">
      <ul id="navlist">
        <?php mosLoadModules ( 'user3', -1); ?>
      </ul>
    </div></td>
    <td width="273" rowspan="2" valign="top"><div align="right"><img id="fond" src="templates/experimental-light/images/fond.jpg" alt="fond" width="273" height="410" border="0" /></div></td>
  </tr>
  <tr>
    <td valign="top"><!-- id="intro" background="templates/experimental-light/images/intro.jpg"-->
        <table width="100%" border="0">
          <tr>
            <td valign="top" bgcolor="#000000"><div align="left">
              <?php mosMainBody(); ?>
            </div></td>
          </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 10-05-2006 9:34

pour les variations entre les boites standards et les boites microsoft, j'ai utilisé le DocType switching :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
gcyrillus
frontpage mioche
frontpage mioche
MessageDécalage de menu sur IE , Posté le: 10-05-2006 20:42

bonjour,

en effet, difficile de faire autrement.

le probleme dans IE est probablement du au fait que la seconde cellule contenant l'image : laurent .. experimental, n'est pas dimensionnée.

Car par exemple en ciblant directement l'image et en lui ajoutant un margin bottom d'environ 180px, la cellule alors s'agrandit en hauteur (comme elle le fait dans firefoxe, aux environ de 410px), ce qui reduit la cellule du dessus a sa taille initialement prevue: 105px (IE comprend height comme min-height et partage donc la hauteur du tableau entre les 2 cellules .

Code:
td img {margin:0;margin-bottom:180px;}
/* pour IE la taille de la cellule contenant l'image laurent ... n'est pas dimensionné en hauteur, les 2 cellules se partage donc la hauteur du <table> */
td div img {margin-bottom:0;}
/* pour IE on annule ici pour l'autre image */


en test avec le css, le menu reprend sa place , ou bien indiqué la hauteur de la cellule dans la balise td concernée pour evité tout malentendu avec d'autre pages , d'autres images et d'autre tableau..

++
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 11-05-2006 20:02

je n'ai pas testé encore vu que je ne suios pas chez moi, mais j'ai du mal à voir comment cela peut me permettre de régler le soucis du menu..

mon problème c'est la puce du menu actualités...
gcyrillus
frontpage mioche
frontpage mioche
MessageDécalage de menu sur IE , Posté le: 11-05-2006 21:13

pour la puce c'est:
Code:
white-space: nowrap;
...pose le probleme, a enlever donc Smile .

test quand même:
Code:
td img {margin:0;margin-bottom:180px;}/* pour IE la taille de la cellule contenant l'image laurent ... n'est pas dimensionné en hauteur, les 2 cellules se partage donc la hauteur du <table> */
td div img {border:0;margin-bottom:0;}/* pour IE on annule ici pour l'autre image */
en comparant l'affichage entre IE et firefoxe, avec et sans , peut-etre prefere tu la version IE.
Sinon, en considerant ta page il vaut mieux que tu determine la hauteur de la seconde cellule , plutot que de faire usage de ce "morceau" de css, qui n'est la qua titre de test et totalement inadapté. Smile

++
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 12-05-2006 20:49

je vais essayer le :
Code:

white-space: nowrap;


et si tu relis mon premier message ainsi que le sujet, c'est bien mon problème original... Smile

et j'ai vais aussi tester le reste (rien n'est inutile), je te tiens au courant !

merci
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 14-05-2006 16:03

je viens d'essayer de rajouter le nowrap sur les liens mais ça ne change rien du tout, j'en avais d'ailleurs déjà mis un sur l'UL du menu...
gcyrillus
frontpage mioche
frontpage mioche
MessageDécalage de menu sur IE , Posté le: 17-05-2006 14:47

Smile, justement, je te dis que c'est lui qui pose probleme et qu'il faut l'enlever, du moins dans IE6 , inferieur pas tester ...
Citation:
pour la puce c'est:
Code:
white-space: nowrap;
...pose le probleme, a enlever donc Smile .


++
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 17-05-2006 17:01

ok autant pour moi Embarassed

je vais vérifier...
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 17-05-2006 17:06

si je l'enleve mon menu passe sur deux lignes...
gcyrillus
frontpage mioche
frontpage mioche
MessageDécalage de menu sur IE , Posté le: 17-05-2006 21:10

Etonnant, probable que j'ai touché a autre chose car même en prenant la plus grosse taille de police , ton menu reste sur une ligne chez moi (IE6)

voici le css que j'ai en local (pas de ligne supplementaire dans IE pour le menu et avec ou sans le css que j'ai ajouté pour redimensionné les cellules comme dans ff ) :
Code:
#intro {
background-repeat:no-repeat;
   }
   
#langue {
padding-right:30px;
}

td img {display: block;}

body {
   background-color: #000000;
}
.table_total {
   border: 1px solid #CCCCCC;
   vertical-align: middle;
}

/*--------------Menu Top------------- */
#navcontainer {

}
td img {margin:0;margin-bottom:180px;}/* pour IE la taille de la cellule contenant l'image laurent ... n'est pas dimensionné en hauteur, les 2

cellules se partage donc la hauteur du <table> */
td div img {border:0;margin-bottom:0;}/* pour IE on annule ici pour l'autre image */
#navlist ul
{
margin:0;
padding:0;
/*white-space: nowrap; */
/*width:480px; en plus */
}

#navlist li
{
display:inline;
list-style-type: none;
   
}

#navlist a
{
line-height: 20px;
padding: 1px 8px 1px 2em;
background-image: url(http://experimental-light.nuxit.net/templates/experimental-light-versionlight/images/puce0.jpg);
}

#navlist a:link, #navlist a:visited
{
color: #000;
text-decoration: none;
}

#navlist a:hover
{
background-image: url(http://experimental-light.nuxit.net/templates/experimental-light-versionlight/images/puce1.jpg);
background-color:#000000;
color: #fff;
}


/* ############################################ */



td,tr,p,div {
  font-family      : Arial, Helvetica, Trebuchet MS, Verdana, sans-serif;
  font-size        : 11px;
  color            : #fff;
}

ul {
  margin           : 5px 5px 5px 5px;
}



hr {
  height           : 1px;
  width            : 97%;
}

table.searchintro {
  background-color : #FFFFFF;
  border           : 1px solid #777777;
}

/* ###################### LINKS ###################### */
a:link, a:visited {
  font-family      : Verdana;
  font-size        : 11px;
  color            : #fff;
  text-decoration  : none;
  font-weight      : bold;
}a:hover {
  color            : #999999;
}

a.category:link, a.category:visited {
  font-family      : Verdana;
  font-size        : 10px;
  color            : red;
  font-weight      : bold;
  text-decoration  : none;
}

a.category:hover {
  text-decoration  : none;
}

a.buttonbar:link, a.buttonbar:visited {
  font-family      : Trebuchet MS;
  font-size        : 11px;
  color            : #969696;
  font-weight      : bold;
  text-decoration  : none;
  letter-spacing   : 1px;
}

a.buttonbar:hover {
  color            : #c00000;
}

a.blogsection:link, a.blogsection:visited {
  font-family      : Trebuchet MS;
  font-size        : 11px;
  color            : #c00000;
  font-weight      : bold;
  border-bottom    : 1px dashed #c00000;
  text-decoration  : none;
}
a.blogsection:hover {
  border-bottom    : 1px solid #c00000;
}

/* ###################### MAIN MENU SETTINGS ###################### */
.mainlevel {
  font-family      : Verdana, Geneva, Arial, Helvetica, serif;
  font-size        : 11px;
  font-weight      : bold;
  text-align       : center;
  padding-left    : 2px;
  padding-bottom: 1px;
  display: block;
  line-height: 23px;
}

a.mainlevel:link, a.mainlevel:visited {
  background-image: url(http://experimental-light.nuxit.net/templates/experimental-light-versionlight/images/bouton_menu1.jpg);
  background-repeat: no-repeat;
  color: #000000;
}

a.mainlevel:hover {
  background-image: url(http://experimental-light.nuxit.net/templates/experimental-light-versionlight/images/bouton_menu2.jpg);
  background-repeat: no-repeat;
  color: #ffffff;
}

.sublevel {
  font-family      : Arial, Helvetica, serif;
  font-size        : 12px;
  width            : 100%;
  text-align       : right;
  margin-bottom    : 3px;
  padding-right    : 3px;
}

a.sublevel:link, a.sublevel:visited {
  color            : #c00000;
}

a.sublevel:hover {
  border-bottom: 1px dashed #C00000;
}

/* ###################### MODULE SETTINGS ###################### */
table.moduletable {
  width            : 100%;
  padding          : 3px;
  padding-top:   5px;
}
#menuright table {
padding          : 0px;
padding-top:   5px;
}

.newsflash {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #27A19A;
}

.atitre1 {
   font-family    : Arial, Helvetica, sans-serif;
   font-size      : 16px;
   font-weight    : bold;
   color          : #FF0000;
}

.frameheader {
  font             : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 18px;
  font-weight      : none;
  color            : #808080;
}

.poll {
  font-family      : Arial, Helvetica, "Trebuchet MS", Verdana, sans-serif;
  font-size        : 10px;
  color            : #FFFFFF;
  line-height      : 15px
}

/* ###################### FORMULAR SETTINGS ###################### */
.button {
  font-family      : Arial, Helvetica, Trebuchet MS, Verdana, sans-serif;
  font-style       : normal;
  font-weight      : bold;
  font-size        : 10px;
  color            : #000000;
  border           : 1px solid;
}

.inputbox {
  font-family      : Arial, Helvetica, Trebuchet MS, Verdana, sans-serif;
  font-size        : 10px;
  font-weight      : bold;
  color            : #000000;
  background       : #FFFFFF;
  border           : 1px solid;
}

/* ###################### CONTENT PAGE SETTINGS ###################### */
a.contentpagetitle:link, a.contentpagetitle:visited {
  font-family      : Arial;
  font-size        : 15px;
  font-weight      : bold;
  color            : #333333;
  padding          : 1px;
  border-bottom    : none;
}

a.contentpagetitle:hover {
  color            : #330000;
}

.contentpane {
  text-align       : justify;
  padding:0px;
}

.contentpaneopen {
  text-align       : justify;
  width:100%;
}

.contentheading {
  font-family      : Trebuchet MS;
  font-size        : 14px;
  font-weight      : bold;
  color            : #969696;
  text-align       : left;
  border-bottom    : 1px solid #969696;
  padding-left     : 6px;
  height:20px;

}
/*----Titre composant - section - cat�gorie */
.componentheading {
width:100%;
  font-family      : Trebuchet MS;
  font-size        : 14px;
  font-weight      : bold;
  color            : #969696;
  text-align       : left;
  padding-left     : 6px;
  border-bottom    : 1px solid #969696;
}

.contentdescription {
  font-family      : Arial, Helvetica, Trebuchet MS, Verdana, sans-serif;
  font-size        : 11px;
  color            : #333333;
  text-align       : left;
}

.category {
  color            : #C0C0C0;
  font-family      : Arial, Helvetica, Trebuchet MS, Verdana, sans-serif;
  font-size        : 11px;
  font-weight      : bold;
  text-decoration  : none;
}

/* ###################### style contenu pony ###################### */
.sectiontableentry1 {
margin:10px;


 }

.sectiontableentry2 {
  margin           : 3px;
 }

.sectiontableheader {
  color            : #FFFFFF;
  height           : 20px;
  font-weight      : bold;
  padding-left     : 10px;
  padding-right    : 0px;
  height:27px;
}

/* ###################### SMALL FONT SETTINGS ###################### */
.small {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 9px;
  color            : #CC6600;
  text-decoration  : none;
  font-weight      : normal;
}

.smalldark {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 9px;
  color            : #ff0000;
  font-weight      : normal;
}

/* ###################### TABLE OF CONTENT SETTINGS ###################### */
.contenttoc {
  background-color : #f0f0f0;
  border           : solid 1px #777777;
  padding          : 3px;
}

a.toclink:link, a.toclink:visited {
  color            : #707070;
  font-weight      : bold;
  border-bottom    : none;
}

a.toclink:hover {
  color            : #ff3300;
  border-bottom    : 1px dashed #ff3300;
}

/* ###################### PATH-WAY SETTINGS ###################### */
.pathway {
   font-family      : Arial;
   font-size        : 11px;
   font-weight      : bold;
   color            : #ff3300;
}

a.pathway:link, a.pathway:visited {
  font-family      : Arial;
  font-size        : 11px;
  font-weight      : bold;
  color            : #ff0000;
  border-bottom    : 1px dashed #000000;
}

a.pathway:hover {
  color            : #ff3300;
  border-bottom    : 1px solid #ff3300;
}

/* ###################### DATE TIME SETTINGS ###################### */
.createdate {
  font-style       : italic;
}

/* ###################### PAGE NAVIGATION SETTINGS ###################### */
.pagenavbar {
  text-align       : center;
}

/* ###################### OTHER SETTINGS ###################### */
.blog_more {
  font-size        : 14px;
  font-weight      : bold;
  font-style       : italic;
  text-align       : left;
  padding-top      : 10px;
  padding-left     : 15px;
}

.readon {
  font             : Arial, Verdana, Trebuchet MS;
  font-size        : 13px;
  font-weight      : bold;
  text-align       : left;
  padding-left     : 10px;
}
body {
   padding: 0px;
}

.information {
background-color:#0099FF;}

textarea {
   background-color: #fff;
}


et le html
Code:
<!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=iso-8859-9"><title>::: Laurent Martinez - Experimental Light ::: - Home</title>


<meta name="description" content="Joomla - le portail dynamique de gestion de contenu">
<meta name="keywords" content="Joomla, joomla">
<meta name="Generator" content="Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved.">
<meta name="robots" content="index, follow">
   <link rel="shortcut icon" href="http://experimental-light.nuxit.net/images/favicon.ico">
   
<meta name="..." content="www.experimental-light.com">
<link rel="stylesheet" href="template_css.css" type="text/css">
   <link rel="shortcut icon" href="http://experimental-light.nuxit.net/images/favicon.ico"><!--Fireworks 8 Dreamweaver 8 target.  Created Wed Mar 15 02:19:44 GMT+0100 2006--></head><body>
<table border="0" height="100%" width="100%">
  <tbody><tr>
    <td align="center" valign="middle"><table border="0" cellpadding="0" cellspacing="0" width="80%">
      <tbody><tr>
        <td id="langue"></td>
      </tr>
    </tbody></table>
      <table class="table_total" align="center" border="0" width="80%">
        <tbody><tr>
          <td height="105" width="280">
<div id="navcontainer">
<ul id="navlist"><ul id="mainlevel-nav"><li><a href="http://experimental-light.nuxit.net/index.php?option=com_content&task=view&id=1&Itemid=29" class="mainlevel-nav">actualité</a></li><li><a href="http://experimental-light.nuxit.net/index.php?option=com_content&task=view&id=12&Itemid=30" class="mainlevel-nav">l'artiste</a></li><li><a href="http://experimental-light.nuxit.net/index.php?option=com_wrapper&Itemid=35" class="mainlevel-nav">galerie</a></li><li><a href="http://experimental-light.nuxit.net/index.php?option=com_ponygallery&Itemid=26" class="mainlevel-nav">réalisations</a></li><li><a href="http://experimental-light.nuxit.net/index.php?option=com_facileforms&Itemid=28" class="mainlevel-nav">contacts</a></li></ul></ul>
</div>

</td>
          <td rowspan="2" valign="top" width="273"><div align="right"><img id="fond" src="Laurent%20Martinez%20-%20Experimental%20Light%20%20%20-%20Home_fichiers/fond.jpg" alt="fond" border="0" height="410" width="273"></div></td>
        </tr>
        <tr>
          <td valign="top" width="280"><img src="Laurent%20Martinez%20-%20Experimental%20Light%20%20%20-%20Home_fichiers/intro.jpg" alt="Laurent Martinez" height="123" width="400"></td>
        </tr>
      </tbody></table>
      </td>
  </tr>
</tbody></table>
<!-- 1147286805 --></body></html>


voila , je peut te faire un screen shot si tu veut .

++
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 17-05-2006 23:05

super cool !! merci beaucoup !

je viens de tester ça marche nickel !

j'ai pas encore pris le temps de voir exactement ce qui clochais mais je vais m'y attarder ! faut que je regarde ce que tu as changé en plus !! ça me perturbe !!
albedo0
supermioche
supermioche
MessageDécalage de menu sur IE , Posté le: 18-05-2006 13:19

retour à la case départ, j'ai remis l'ancienne feuille de style, car j'ai pas le temps de regarder cette semaine et ça "semblait" marcher nickel, mais le point contact passait derrière l'image de l'interface (la lampe tout à droite) sur Firefox !!!!

marre de ces pb de compatibilités.... Evil or Very Mad
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:Décalage de menu sur IE    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Aller à la page 1, 2  Suivante
Page 1 sur 2

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales