Couleur+bordure qui disparaissent avec Internet Explorer

**le Mer Aoû 10, 2005 9:37**

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 ?

**le Mer Aoû 10, 2005 9:39**

Au passage, voici la code de la page

Code: Tout sélectionner: <!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">© bla bla</p> <hr class="spacer" /> </div> </div></div> </body> </html>

Puis celui de la CSS

Code: Tout sélectionner: *{ 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; }

**le Mer Aoû 10, 2005 9:46**

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: Tout sélectionner: <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: Tout sélectionner: .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; }

**le Mer Aoû 10, 2005 13:51**

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 :/

**le Mer Aoû 10, 2005 14:37**

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).

Couleur+bordure qui disparaissent avec Internet Explorer

Couleur+bordure qui disparaissent avec Internet Explorer

Lectures recommandées sur ce thème :

Qui est en ligne