Aller au contenu

IE Yes, Firefox No ! CSS qui déraille

nomasis

Par nomasis
dans (X)HTML et CSS

 Partager

Sujets conseillés

nomasis

nomasis

Posté
Posté

Hello, hello...

J'ai un probleme sans doute tout bete (?)

Voici la page telle qu'elle devrait s'afficher :

earyg1.gif

C'est bon dans IE...

Mais dans Mozilla voici ce que je vois :

earyj7.gif

Les sous-menus sont pas au bon endroit et le filet qui sépare le contenu du pied de page disparait !

Voici le code de l'affaire :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Transmanager</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#bandeau {
float:left;
width:100%;
background-color: #FFFFFF;
background-image: url("");
background-repeat: no-repeat;
background-position: left top;
}

div#horizontal_sousmenu
{
height:25px;
background-color:#CCC;
}

body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.em Verdana, Arial, Helvetica, sans-serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} 

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}

#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}

#header li {
float:left;
background:url("left_both.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #999999;
font-size: 12px;
}

#header a {
float:left;
display:block;
background:url("right_both.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:500;
color:#000000;
font-size: 14px;
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}

/* End IE5-Mac hack */
#header a:hover
{
color:#FF0000;
}

#header #current {
background-position:0 -150px;
border-width:0;
}

#header #current a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}

#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}

#header li:hover a {
background-position:100% -150px;
}

/* Partie réservée au sous menu horizontal */

div#horizontal_sousmenu ul
{list-style-type:none;
background-color:#DAA;
height:25px;
overflow:hidden;
margin:0;
padding:0;
}

div#horizontal_sousmenu ul li
{display:  inline;  /* en ligne et cote a cote */
line-height:25px;
vertical-align:middle;
}

div#horizontal_sousmenu ul li a
{text-decoration:none;
display:inline-block;
height:25px;
}

div#horizontal_sousmenu ul li a:hover
{background-color:black;
color:white;
                     }
/* Partie réservée au footer */				
div#footer
{
height:40px;
border-top:1px solid black;
background-color:#EEE;
}
</style>
</head>

<body>
<div id="header">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Jobs</a></li>
    <li><a href="#">Documents</a></li>
    <li><a href="#">Submit...</a></li>
	<li><a href="#">Manager status</a></li>
    <li><a href="#">Flow configurations</a></li>
	<li><a href="#">Security</a></li>
	<li><a href="#">Administration</a></li>
</ul>
</div>

<div id="horizontal_sousmenu">
<ul title="Menu de navigation globale">
<li><a href="#" title="Retour à la page d'accueil">Home</a></li>
    <li><a href="#" title="Accès aux actualités">Actualité</a></li>
<li><a href="#" title="Comment nous contacter">Contact</a></li>
<li><a href="#" title="Comment utiliser notre site">Aide</a></li>
</ul>
</div> <!-- Fin du sous menu horizontal -->
<div id="content">
 <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse fermentum massa. Pellentesque elit lacus, pulvinar non, vehicula id, imperdiet id, purus. Praesent sit amet sem eu libero lobortis mollis. Proin pellentesque, nisl nec porttitor eleifend, metus nisi gravida mauris, ac pulvinar eros nisi eu nulla. Curabitur felis augue, fringilla vitae, cursus eu, blandit at, ligula. Maecenas accumsan tortor sed mi. Cras ac tortor. Nulla nec libero. Vestibulum dignissim, purus et suscipit congue, nibh nisl sagittis lorem, a auctor diam turpis in nisl. Quisque ullamcorper semper lacus. In quam ipsum, euismod non, fringilla in, elementum fermentum, sapien. Cras posuere velit vel eros. Nulla facilisi. 
</p>     
</div>
 <!-- Pied de page -->
<div id="footer">
Ceci est le pied de page
</div> <!-- Pied de page -->
</body>
</html>

Mamat

Mamat

Posté
Posté

J'ai lu quelque part (peut-être pompage) qu'il fallait même spécifier les deux, car le premier est pour ie et l'autre pour les gecko-based... à vérifier

Dudu

Dudu

Posté
Posté
J'ai lu quelque part (peut-être pompage) qu'il fallait même spécifier les deux, car le premier est pour ie et l'autre pour les gecko-based... à vérifier

Et pour les autres ? :huh:

Il n'y a que IE et Gecko dans le monde des navigateurs ? Et ben on doit s'ennuyer ferme alors :D

Plus sérieusement, list-style est la forme abrégée de list-style-type + list-style-image + list-style-position.

Or un forme abrégée doit contenir toutes les informations des formes longues. Donc si on utilise list-style tout court, on doit renseigner le type, l'image, et la position.

Exemple: list-style: upper-roman url(/path/to/img.gif) outside;

Certains navigateurs acceptent de ne trouver qu'une seule information dans une forme abrégée mais c'est un laxisme et une permissivité sur lesquels il est bon de ne pas compter (en plus c'est presque invalide dans le sens où c'est non-conforme aux règles données).

Donc pour enlever les puces de listes par défaut c'est bien list-style-type:none;

Pour tout le monde ;)

nomasis

nomasis

Posté
  • Auteur
Posté (modifié)
list-style-type: none;

Çà aura plus de chances de passer ;)

<{POST_SNAPBACK}>

:blink:

mais c'est bien ce que j'ai mis ( list-style-type: none;) !

Mais ça marche pas !

Et je comprends pas pourquoi ça empêche ce sous-menu horizontal de s'afficher SOUS le menu onglets comme c'est présenté dans la copie d'écran d'IE ? :wacko:

Modifié par nomasis
Dudu

Dudu

Posté
Posté
:blink:

mais c'est bien ce que j'ai mis ( list-style-type: none;) !

Mais ça marche pas !

Et je comprends pas pourquoi ça empêche ce sous-menu horizontal de s'afficher SOUS le menu onglets comme c'est présenté dans la copie d'écran d'IE ?  :wacko:

Ah bon. Et bien alors excuse-moi je dois avoir quelques problèmes de vue B)

Je cours voir un opticien en urgence :D

#header ul {

margin:0;

padding:10px 10px 0;

list-style:none;

}

nomasis

nomasis

Posté
  • Auteur
Posté (modifié)
Ah bon. Et bien alors excuse-moi je dois avoir quelques problèmes de vue B)

Je cours voir un opticien en urgence :D

<{POST_SNAPBACK}>

Oops ! tu as raison...

je regardais le "list-style-type: none;" du sous menu, pas au bon endroit donc. Autant pour moi!

Mais bon ça ne règle pas le problème pour autant. :huh:

Modifié par nomasis
nomasis

nomasis

Posté
  • Auteur
Posté (modifié)

je deviens :fou: ...

impossible sous Firefox de faire glisser ce sous menu en dessous !

Help !

Modifié par nomasis
Dudu

Dudu

Posté
Posté

Je sens qu'on est en train de tout confondre, les menus, les sous-menus et tout le bouzin :wacko:

Qu'est ce qui pose encore problème ?

- y'a-t-il toujours les puces de la liste qui se baladent à droite ?

- si le sous-menu ne s'affiche toujours pas sur Firefox, essaie de voir du côté du overflow:hidden que tu as mis (pour une raison que je ne m'explique pas)

nomasis

nomasis

Posté
  • Auteur
Posté
Je sens qu'on est en train de tout confondre, les menus, les sous-menus et tout le bouzin :wacko:

Qu'est ce qui pose encore problème ?

- y'a-t-il toujours les puces de la liste qui se baladent à droite ?

- si le sous-menu ne s'affiche toujours pas sur Firefox, essaie de voir du côté du overflow:hidden que tu as mis (pour une raison que je ne m'explique pas)

<{POST_SNAPBACK}>

;)

j'ai tellement bougé le code que j'ai tout bousillé...

du coup je me suis emmelé les pinceaux.

Une bonne tasse de café et ta perspicacité m'ont bien aider à y voir clair et à remettre les choses en ordre.

Avec tous mes remerciements. B)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...