Couleur+bordure qui disparaissent avec Internet Explorer

Oncle Tom · 10 Août 2005

Bonjour bonjour ^^

je fais face à un problème assez gênant. Sur 2 essais d'habillages graphiques j'ai placé des listes <ul> avec des éléments pour une barre de navigation puis en bas de page pour une liste de liens (haut de page, rss et contact). J'ai appliqué la propriété display:inline; aux <li> afin de les disposer horizontalement. Jusque là tout va bien. Sous Firefox, tout baigne : tout s'affiche comme il faut ça va.

Sous Internet Explorer par contre, l'affichage est impeccable. SAUF quand je survole un lien contenu dans ces listes : des fois j'ai le fond et la bordures du <ul> qui disparaissent (et quand on scoll la page et qu'on remonte ces éléments ont réapparu) soit carrément, il m'arrive d'avoir un énorme blanc qui déborde sur le texte situé au-dessus.

J'y comprends rien :/ j'ai effectué quelques recherches sur des bugs IE de disparition de bordures etc mais ça concernait des images et des scintillement. Quelqu'un a une idée d'où cela pourrait venir ?

Oncle Tom · 10 Août 2005

Au passage, voici la code de la page

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-1" />
<title>interface 3</title>
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" title="Style - Base" />
</head>
<body id="top">

<p id="logo"><a href="#"><img src="css/logo.gif" alt="" /></a></p>

<div id="superconteneur"><div id="conteneur">
	<ul id="navigation">
		<li class="racine"><a href="#">Accueil</a></li>
		<li><a href="#">Bla bla</a></li>
		<li>Bla bla</li>
	</ul>

	<div id="corps">
	<p>Contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</p>
	<p>Contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</p>
	<p>Contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
	contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</p>	
	</div>

	<ul id="menu">
		<li>Menu ici</li>
	</ul>
	
	<ul id="membre">
		<li class="racine">Bienvenue <strong>Pseudo</strong></li>
		<li><a href="#">0 MP</a></li>
		<li><a href="#">Nouveaux messages</a></li>
	</ul>
	
	<div id="footer">
		<p id="liens"><a href="#top" onclick="window.scroll(0,0);return false;">Haut de page</a> | <a href="#">RSS</a> | <a href="#">Contact</a></p>
		<p id="copyright">&copy; bla bla</p>
		<hr class="spacer" />
	</div>
</div></div>

</body>
</html>

Puis celui de la CSS

Code:

*{ margin:0; padding:0; }
body{ background:#fff url("background.gif"); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:75%; }
a:link, a:visited{ color:#00f; }
a:visited{ color:#00c; }
a:hover{ color:#fc0; cursor:pointer !important; }

.spacer{ visibility:hidden; clear:both; }

#logo{ position:absolute; top:0; left:0; z-index:99; }
#logo a img{ border:none; }
#superconteneur{ width:760px; background:transparent url("frise.gif") repeat-y; border-bottom:1px solid #ccc; position:relative; cursor:default; }
#conteneur{ background:#fff url("bordure-verticale.gif") repeat-y right; width:auto; padding:90px 0 0 0; margin:0 0 0 40px; }

#footer{ border-top:1px solid #ccc; background:#fcfcfc; margin:0 3px 0 0; }
#footer p{ width:49%; float:left; padding:10px 0 10px 3px; }
/*#footer #liens{ }*/
#footer #copyright{ text-align:right; color:#ccc; }

#navigation{ background:#fcfcfc; list-style:none; margin:5px 3px 5px 0; padding:2px 0 2px 5px; border:1px solid #ccc; border-left:none; border-right:none; }
#navigation li{ display:inline; font-weight:bold; background:transparent url("navigation-separateur.gif") no-repeat left center; padding:0 2px 0 14px; }
#navigation li.racine, #membre li.racine{ background:transparent; padding:0 2px 0 0; }

#membre{ position:absolute; top:0; right:0; z-index:1; list-style:none; margin:2px 5px 0 0; }
#membre li{ display:inline; background:transparent url("navigation-separateur.gif") no-repeat left center; padding:0 2px 0 14px; }


#menu{ list-style:none; position:absolute; top:0; left:0; margin:30px 3px 0 40px; padding:2px 0 2px 120px; }
#menu li{ text-transform:uppercase; font-weight:bold; color:#999; }

#corps{ padding:5px; }
#corps p{ text-align:justify; margin-bottom:10px; }

Luj · 10 Août 2005

Si j'ai bien compris, ce que tu veux obtenir ressemble à ce que j'ai fait sur une de mes pages. Pas de problème particulier avec une barre de menu horizontale avec fond et bordure visible. Seule différence, j'utilise un display:block au lieu d'inline. Voir ici

Code:

<ul class="menu">
	<li><a ... >Lien 1</a></li>
	<li><a ... >Lien 2</a></li>
	<li><a ... >Lien 3</a></li>
</ul>

et la CSS:

Code:

.menu a {
   margin: 0 2px;
   height: 20px;
   width: 125px;
   display: block;
   text-align: center;
   border: thin solid #999999;
   text-decoration: none;
   background: #fff;
}
.menu a:hover {
   background: #ccc;
}
.menu a:active {
   background: gray;
   color: #fff;
}

Oncle Tom · 10 Août 2005

Okay vu, t'utilises un float:left (dans ta propriété <li>). J'vais essayer avec ça voir si ça produit le même effet.
C'est c*n pque le plus logique c'était l'inline dans mon cas :/

Oncle Tom · 10 Août 2005

Bon j'ai testé et ça marche nickel, c'est l'utilisation du 'inline' sur les <li> qui pose problème ... pff quelle poisse.

Si y'a un hack pour ce soucis (autre que le contournement en block) je suis preneur également, c'est plus simple et moins contraignant pour la mise en page).