28122 sujets

CSS et mise en forme, CSS3

[Résolu] Bug sur les border-top

Bonjour,

J'ai un problème de bug sur mon menu. J'ai mis un "border-top" sur les rubriques et un "inherit" sur les sous-rubriques. Firefox le prend en compte mais pas IE. Comment pourrais-je faire pour résoudre ce problème ?

Code HTML

<!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>
<title>L'histoire des Domaines Tatin : Les Ballandors, Le Tremblay, Les Demoiselles Tatin, les groupements fonciers viticoles </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Vignerons récoltants en AOC Quincy avec les Domaines des Ballandors et le Domaine du Tremblay, ainsi qu'en AOC Reuilly avec la SCEV les Demoiselles Tatin, les Domaines Tatin vous vous accueillent dans leur gîte rural et leur cave de Brinay en Berry pour vos escapades gourmandes et curieuses." />
<meta name="keywords" content="viticulteur indépendant, vendange, route des vins, grain noble,    vins, vin, viticulture, vin loire, vin france, vignoble vin, route vin loire, quinçy, reuilly, demoiselle tatin, tatin, Tatin, producteur vin, vignoble cepage, vignoble, cepages, cépages, gastronomie, historique, famille, domaine, gamme, Grand, cru, Cru, Vendanges, vendange, Grains, grain, noble, Nobles, tradition, vinification, tradition, méthode, cher, Cher, 18, bourges, Bourges, plan, usa, USA, vin,vins, vin, vigneron,guide, vigneron indépendant, independant,cncp, cave particuliere, viticulteur,propriétaire,récoltant, Viticulteur indépendant, viticultrice indépendante, viticulteurs, viticultrices, domaine Tremblay, Domaine Ballandors, Wilk, wilk, berry, Berry, tremblay, ballandors, domaine ballandors, domaine tremblay, Tremblay, Ballandors, Loire Valley, loire valley, sucellus, Sucellus, Duché de Berry, duché de berry, Les très riches heures du Duc de Berry, Duc Berry, Eglise romane Brinay, fouleur raisin, Les trois grâces, trois grâces, Tempereau, Preuilly, preuilly, paysan vigneron, vinificateur, Poésie vin, Poésie vignes, Sauvignon, sauvignon, Pinot noir, pinot noir, Vin, partage, générosité, humanisme, vin culture, Brinay, brinay, méreau, Méreau, vierzon, Vierzon, gîte rural, gîte rural cher, gîte rural bourges, hébergement cher, hébergement ferme, hébergement domaine, hébergement 18 , gîte rural 18, Gîte rural Cher, Gastronomie, salon gastronomie, salons vin, salon vin, cuvée vieille vignes, cuvée domaine, cuvées domaines, goût, culture du goût, demoiselles Tatin, Demoiselles Tatin, Demoiselles tatin, demoiselles tatin, Quincy, quincy, appellation origine contrôlée, AOC quincy, AOC reuilly, AOC Quincy, AOC Reuilly, Jean Tatin, Chantal Wilk, Commanderie, Nouzats, route brinay, brinay méreau, Brinay Méreau, route Brinay Méreau, camping car, campings car, France Passion, France passion, Guide Hachette Quincy, Médailles Quincy, médailles quincy, médaille or quincy, Macon médailles quincy, oenotourisme, vinomedia publishing" />
<meta http-equiv="Content-Language" content="fr">
<meta name="Author" content="Magali Ducroux">
<meta name="Identifier-URL" content="http://www.domaines-tatin.com">
<meta name="category"content="viticulture">
<meta name="Copyright" content="Les Domaines Tatin">
<meta name="Revisit-after" content="7 days">
<meta name="expires"content="never">
<meta name="Robots" content="all">
<link rel="shortcut icon" type="images/x-icon" href="images/favicon.gif" />

<script type="text/javascript" src="_include/prototype.js"></script>
<script type="text/javascript" src="_include/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="_include/lightbox.js"></script>
<script type="text/javascript" src="_include/scriptMenu.js"></script>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css" media="screen">
<!--
@import url("styles/feuille.css");
@import url("styles/lightbox.css");
-->
</style>
</head>

<body>

<div id="conteneur">

<div id="header">
<img src="images/bandeau_haut1.jpg" alt="Les Domaines Tatin" title="Les Domaines Tatin" id="hc" >
</div>

<div id="separation">
</div>

<div id="fondconteneur">
<div id="gauche">
	<ul id="menus">
		<li>Accueil
			<ul id="sousMenu">
				<li><a href="index.html">Edito</a></li>	
			</ul>
		</li>
		<li>Les Domaines
			<ul id="sousMenu" class="Montre">
				<li><a href="domaines-histoire.html">L'histoire</a></li>
				<li><a href="domaines-ballandors.html">Les Ballandors</a></li>
				<li><a href="domaines-tremblay.html">Le Tremblay</a></li>
				<li><a href="domaines-demoiselles.html">Les Demoiselles Tatin</a></li>
				<li><a href="domaines-groupements.html">Group. fonciers viticoles</a></li>
			</ul>
		</li>
		<li>Les vins
			<ul id="sousMenu">
				<li><a href="vins-quincy.html">Quinçy</a></li>
				<li><a href="vins-reuilly.html">Reuilly</a></li>
			</ul>
		</li>
		<li>De la vigne au vin
			<ul id="sousMenu">
				<li><a href="vigne-terroir.html">Le terroir</a></li>
				<li><a href="vigne-vignerons.html">Les vignerons</a></li>
				<li><a href="vigne-cave.html">La cave</a></li>
				<li><a href="vigne-vendanges.html">Les vendanges</a></li>
			</ul>
		</li>
		<li>Oenotourisme
			<ul id="sousMenu">
				<li><a href="oenotourisme-degustation.html">Dégustation</a></li>
				<li><a href="oenotourisme-visite.html">Visite et découverte</a></li>
				<li><a href="oenotourisme-gastronomie.html">Gastronomie</a></li>
			</ul>
		</li>
		<li>Gîte rural
			<ul id="sousMenu">
				<li><a href="gite.html">Le gîte du Tremblay</a></li>
			</ul>
		</li>
		<li>Presse
			<ul id="sousMenu">
				<li><a href="presse-articles.html">Articles</a></li>
				<li><a href="presse-distinctions.html">Distinctions</a></li>
				<li><a href="presse-citations.html">Citations</a></li>
			</ul>
		</li>
		<li>Contact
			<ul id="sousMenu">
				<li><a href="contact.php">Formulaire et contacts</a></li>
			</ul>
		</li>
		<li>Forum
			<ul id="sousMenu">
				<li><a href="index.html">Espace d'échange</a></li>
			</ul>
		</li>
		<li>Liens
			<ul id="sousMenu">
				<li><a href="liens.html">Le tourisme local<br/> Les restaurants<br/> Les cavistes<br/> Les amis...</a></li>
			</ul>
		</li>
	</ul>
</div> 
	  
<div id="centre">
	  <img class="titre" src="images/titres_rubriques/domaines_histoire.jpg" alt="Les Domaines Tatin" title="Les Domaines Tatin" id="hc" >  
  	  <p class="presentation"><span class="gras">« Travailler nos vins, comme produits d’un terroir, dans toute leur dimension historique, culturelle et gustative »</span><br/><br/>
<span class="gras">Chantal WILK et Jean TATIN</span> sont tous les deux ingénieurs agronomes. Ils ont créé leurs domaines il y a quinze ans dans une période de restructuration et de renouvellement de l’A.O.C QUINCY.<br/><br/>
	  </p>
	  <p class="presentation">
	  Cliquez sur les images pour les agrandir
	  </p>
	  <a href="images/domaines/grande/histoire1.jpg" rel="lightbox[histoire]" title=""><img class="cadre" src="images/domaines/histoire/histoire1.jpg" /></a>
	  <a href="images/domaines/grande/histoire2.jpg" rel="lightbox[histoire]" title=""><img class="cadre" src="images/domaines/histoire/histoire2.jpg" /></a>
	  <p class="flottement">QUINCY est une appellation historique du Val de Loire, qui a fêté en 2006 ses soixante dix ans d’Appellation contrôlée. Le décret conférant à QUINCY sa qualité d’Appellation fût en effet promulgué le 06 Août 1936, à la suite d’un long travail de sélection du Sauvignon au sein du vignoble. Ce fût ainsi la première A.O.C. reconnue en Val de Loire.
	  </p>
</div>
</div>

<div id="pied">
	  <p class="piedpage">LES DOMAINES TATIN - Chantal Wilk et Jean Tatin - Le Tremblay 18120 Brinay - 02 
	  48 75 20 09 - 06 08 60 55 66 </p>
	  <p class="copyright">L'abus d'alcool est dangereux pour la santé, sachez apprécier et consommer 
	  avec modération.<br />
	  © 2007 Les Domaines Tatin - 
	  <a href="http://www.magaliducroux.com" target="_blank">	
	  Conception et réalisation : Magali Ducroux</a> - <a href="mentions-legales.html"> Mentions légales</a>
	  </p>  
</div>
</div>  

</body>
</html>


Code CSS

/* CSS Document */

/* GENERALITES */
html, body, h1, h2, h3, p, dl, dt, dd, ul, li, form{
/* Gestion globale des espaces */
margin:0; padding:0;
}

/*STRUCTURE*/
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background: url(../images/carre_fond1.jpg) repeat;
}
#header {
height: 123px;
}
#separation{
height: 4px;
background-color: #7c851f;
}
#conteneur {
position: relative;
width: 800px;
/*background-image: url(../images/image_fond3.jpg);*/
background-color: #7c851f;
margin: 7px auto 7px auto;                           
}
/*#contour{
border: medium solid #7c851f;
}*/
#fondconteneur{
width: 794px;
margin: 3px 3px 0 3px;
padding: 0 0 10px 0;   
background-image: url(../images/image_fond3.jpg);
}
#gauche {
position: absolute;
width: 170px;
left: 15px;
}
#centre {
margin: 0 0 20px 200px;
}
#pied {
height: 74px;
background: url(../images/bandeau_bas2.jpg) no-repeat;
}

/*MENU*/
#menus{
margin: 22px 0 0 4px;
}
#sousMenu{
padding-bottom: 5px;
}
/*#sousMenuDomaine{
padding-bottom: 8px;
}*/
li, ul{
list-style-type: none;
}
#menus li{
font-size: 1em;
line-height: 1.5em;
display: list-item;
border-top: 2px dotted #fbed8d;
width: 160px;
font-weight: bold;
margin-top: 10px;
margin-right: 2px;
}
#menus li ul li{
display: list-item;
border-top: inherit;
width: 160px;
margin-top: 2px;
height: 12px;
color: #fbed8d;
font-size: 12px;
}
#menus li a{
text-decoration: none;
display: block;
margin: 0 2px;
color: #fbed8d;
cursor: pointer;
}
#menus li ul a{
color: #fbed8d;
font-size: 11px;
cursor: pointer;
width: 160px;
display: block;
margin: 0 2px;
}
#menus li ul a:hover{
text-decoration: none;
color: #c0ce2d;
}
#menus li ul a:active{
text-decoration: none;
color: #c0ce2d;
}

/*classes nécessaires au javascript*/
.Cache{
display: none;
}
.Montre{
display: list-item;
}

/*TEXTE*/
h3{
color: #EED004;
margin: 10px 0 5px 0;
}
p{
margin: 0 10px 10px 0;
color: #fbed8d;
}
legend{
margin: 0 10px 10px 0;
font-weight: bold;
color: #fbed8d;
}
.paragraphe{
width: 595px;
float: left;
}
.presentation{
margin: 10px 10px 10px 0;
}
.flottement{
margin: 10px 10px 0 0 ;
}
a.texte{
color: #fbed8d;
font-weight: bold;
text-decoration: none;
}
a.texte:hover{
color: #a9a727;
font-weight: bold;
text-decoration: none;
}
.gras{
font-weight: bold;
}
.ballandors{
width: 565px;
}

/*IMAGES*/
.cadre{
display: block;
float: left;
border: thin solid #e5e08b;
margin: 0 7px 7px 0;
}
.titre{
margin: 22px 0 10px 0;
}
.bouteille{
display: block;
float: left;
border: thin solid #e5e08b;
margin: 5px 10px 7px 0;
}

/* FORMULAIRE */
.champnom{
margin-left: 43px;
}
.champprenom{
margin-left: 19px;
}
.champemail{
margin-left: 36px;
}
.champsujet{
margin-left: 38px;
}
.champmessage{
margin-left: 12px;
}
.bouton{
margin-left: 330px;
}

/*BAS DE PAGE*/
.piedpage{
margin: 0 0 0 25px;
padding: 10px 0 0 0;
}
.copyright{
margin: 5px 0 5px 100px;
color: #254320;
}
.copyright a{
color: #254320;
text-decoration: none;
}
.copyright a:hover{
color: #fbed8d;
text-decoration: none;
}

Modifié par magaloche (26 Sep 2007 - 11:43)
Je ne sais pas si j'ai été assez clair.
J'ai des bordures (border-top: 2px dotted #fbed8d) pour séparer les rubriques de mon menu déroulant. Mais je ne veux pas qu'elles apparaissent sur les sous-menus. C'est pourquoi, j'ai mis un "border-top : inherit" sur les sous-menus, ce qui fonctionne très bien sur Firefox mais pas sur IE.
Je sais que "border-top" n'est pas complétement accepté par IE mais je ne trouve pas la solution pour contourner ce bug.
Est-ce que quelqu'un en connait une ?
Ca m'aiderait bien...
Merci d'avance
Sujet clos
Aller à