Probleme de border sous firefox

Question

Hervee

17 Feb 2006 à 15:19

Bonjour,
je commence à me mettre à css, j'essaye de me former petit à petit, et donc je fais quelques tests. Sur l'un de mes tests je suis tombé sur un problème avec un border de style "double" qui s'affiche correctement sous ie et opera, mais dont la partie supérieure du trait haut ne s'affiche pas (en gros sur 3 coté j'ai ma bordure double, sur le coté du haut, j'ai seulement un trait, j'espère être compréhensible )

alors ma page html contient :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
	<meta name="author" content="Hervee" />
	<meta name="keywords" content="test" />
	<meta name="description" content="Test" />
	<meta name="robots" content="all" />
	<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
	<title>Test</title>
	<script type="text/javascript"></script>
	<style type="text/css" media="all">
		@import "simple.css";
	</style>
</head>
<body>
	<div id="cadre">
		<div id="conteneur">
			<div id="header"><h1>Titre</h1><img src="images/logo.jpg" title="Logo" alt="Logo"/> </div>
			<div id="menu">
				<h2>menu</h2>
				<ul>
					<li><a href="index.html">accueil</a></li>
					<li><a href="contenu1.html">contenu 1</a></li>
					<li><a href="contenu2.html">contenu 2</a></li>
					<li><a href="simple.html">simple</a></li>
					<li>contact</li>
				</ul>	 
			</div>		
			<div id="sources"><h2>sources</h2>
				<ul>
					<li>source 0</li>
					<li>source 1</li>
					<li>source 2</li>
				</ul>
			</div>	
			<div id="footer">footer</div>	
			</div>
	</div>
</body>
</html>

et la feuille de style associée contient :

body { 
	font: 8pt/16pt Brush, cursive; 
	color: #555753; 
	margin: 0px; 
	background: #D3D3D3 ;
	}

#cadre { 
	margin: 0px;
	background: url(images/bord-droit.png) repeat-y 100% 0;
	height: 100%;
}
#conteneur { 
	margin: 0px;
	background: url(images/bord-gauche.png) repeat-y 0% 0;
	height: 100%;
}

#header{
	text-align: center;
	width: 100%;
}
#header h1{
	margin: 0px;
	padding: 10px;
}

#menu {
	width: 25%;
	float: left;
	margin: 5px;
	text-align: center;
	border-color: #ccaccc; border-width: 3px; border-style: double;
}
#menu ul {
	text-align: left;
	list-style-image : url(images/puce.png);
}
#menu li { 
	line-height: 2.5ex; 
	padding-top: 5px; 
	margin-bottom: 5px;
}
#menu li a:link { 
	color: #1c1ced; 
	text-decoration:none;	
}
#menu li a:visited {
	color: #6363ed; 
	text-decoration: none;
}
#menu li a:hover {
	color: #151594; 
	text-decoration: underline;
}

#sources {
	width: 20%;
	text-align: center;
  float: left;
  margin: 5px;
	border-color: #ccaccc; border-width: 3px; border-style: double;
}
#sources ul {
	text-align: left;
	list-style-image : url(images/puce2.png);
}

#footer {
	clear: both;
	bottom: 1em;
	text-align: center;
	border-color: #ccaccc; border-width: 3px; border-style: double;
}

j'ai essayé de 'jouer' un peu avec la feuille de style/page html, et j'ai réussi à faire apparaitre le bord correctement, mais uniquement en créant d'autres problèmes (ce qui ne m'arrange pas, bien evidemment ^^)

donc les 3 modifications qui ont résolu le problème de bordure (un à la fois):
- enlever le margin: 0px du #header h1 dans la feuille de style
- enlever le "<h1>Titre</h1>" dans la page
- enlever l'image qu'il y a en dessous du titre

est ce que quelqu'un aurait une idée du pourquoi du comment de ce problème de bordure ?

je précise que je ne tiens pas particulièrement à cette mise en page ou à cette bordure, j'essaye juste de comprendre le problème (ça pourrais me servir un jour ^^ )
merci pour les éventuelles réponses,
j'espere que j'ai pas fait d'impair dans mon post

edit : j'ai oublié de précisié, j'ai testé sous windows avec ie6, firefox 1.5 et opera 8.5 (au cas où ça aurais de l'importance)
Modifié par Hervee (17 Feb 2006 - 15:32)

dodormir

17 Feb 2006 à 15:52

Je ne suis pas spécialiste, mais à chaque fois que tu veux mettre une bordure, essaie plutôt cette manière (moi, ça marche toujours):

border:3px double #000;

Tu mets d'abord la grosseur de ton bord, ensuite son style (solid, double, dotted, dashed,...) et enfin sa couleur. Tout en un! Peut-être que ça ira mieux.
ET si jamais tu ne veux pas mettre la même épaisseur de bordure partout, tu utilises en plus:

border-width:3px 3px 3px 2px

Chaque valeur correspondant respectivement à top ; right ; bottom ; left.

S'il y en a seulement deux, alors la première valeur s'applique pour le bord du haut et celui du bas, et la seconde pour le bord droit et gauche. S'il y en a trois, le bord du haut reçoit la première valeur, les bords gauche et droit la deuxième et le bord du bas la troisième.

Dorian Smiley biggrin

Ps: tu ne précises pas dans ton post quelle bordure de ta page pose problème.

Hervee

17 Feb 2006 à 16:01

dodormir a écrit :
Ps: tu ne précises pas dans ton post quelle bordure de ta page pose problème.

oups oubli genant effectivement sorry,
ce sont les bordures supérieures des div menu et sources

(j'ai modifié les definitions de bordures comme indiqué, ça ne change rien au problème d'affichage, mais merci du conseil)

edit : une image pour que ça soit encore plus clair (le cadre rouge est rajouté à la main pour souligner le problème ^^ ) :

oui oui, c'est très très moche, mais c'est juste pour m'entrainer
Modifié par Hervee (17 Feb 2006 - 16:11)

Sujet clos

CSS et mise en forme, CSS3

Probleme de border sous firefox