28172 sujets

CSS et mise en forme, CSS3

Bonjour -

J'affiche un tableau à partir d'une base de données avec le style suivant

table {
	font-size: medium;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	width: 650px;
	border-collapse: collapse;
	border-left: 1px solid #FFCA5E;
	border-right: 1px solid #FFCA5E;
	border-top: 1px solid #FFCA5E;
	border-bottom: 1px solid #FFCA5E;
}
thead th {
	height: 47px;
	color: #000080;
	padding: 12px 7px ;
	text-align: right;
	border-right: 1px solid #FFCA5E;
	background-color: #FCF1D4;
}
tbody td {
	color: #000080;
	padding: 12px 7px ;
	border-bottom: 1px solid #FFCA5E;
	border-right: 1px solid #FFCA5E;
	text-align: right;
}


Le code HTML généré par mon PHP est le suivant (les intitulés de colonnes sont dans la balise entete, le corps du tableau dans la balise vignettes; le style ci dessus est utilisé par les deux) EDIT il y a aussi un div calage pour laisser un espace libre à gauche entre le tableau et le conteneur (div corps)

	<div id="Corps" style="position: absolute; width: 1052px; height: 714px; z-index: 1; left: 279px; top: 156px">
	<div id="calage" style="position: absolute; width: 111px; height: 709px; z-index: 1; left: 0px; top: 0px">
	</div>
	<div id="entete" style="position: absolute; width: 702px; height: 65px; z-index: 2; left: 119px; top: 4px">
	<table>
<style type="text/css" media="all">@import "tableau_tarif.css";</style><thead><th width="25%">Categorie</th><th width="55%">Nom</th><th width="20%">Prix</th></thead></table>
	</div>
	<div id="tableau" style="position: absolute; width: 702px; height: 502px; z-index: 3; left: 119px; top: 80px; overflow: auto;">
	<table>
<style type="text/css" media="all">@import "tableau_tarif.css";</style><tr><td width="25%">Bracelet</td><td width="55%">Topaze - 19,5 cm</td><td width="20%">15</td></tr>
<tr><td width="25%">Bracelet</td><td width="55%">Pierre de lune - 17 à 25 cm</td><td width="20%">38</td></tr>
<tr><td width="25%">Bracelet</td><td width="55%">Pierre de lune - 17 à 25 cm</td><td width="20%">38</td></tr>
<tr><td width="25%">Bracelet</td><td width="55%">Turquoise - 19 cm</td><td width="20%">30</td></tr>
<tr><td width="25%">Bracelet</td><td width="55%">Elastique turquoise</td><td width="20%">15</td></tr>
<tr><td width="25%">Bracelet</td><td width="55%">Cuir twist crystal</td><td width="20%">12</td></tr>

...
</table>


Je n'arrive pas a comprendre pourquoi mes bordures sont visibles sous IE et Safari, mais les bordures haut et gauche ne sont pas visibles sous FF; je suspecte une erreur dans mon CSS masi je ne vois pas où (je suis un petit peu débutant ...)

Merci d'avance à tout expert aux yeux duquel la solution sauterait !

Olivier
Modifié par odel (24 Jan 2010 - 23:10)
Bonjour,

Personnellement, je n'ai pas de différence d'affichage en IE et Firefox 3.6.
Quelle est la version de FF qui pose problème? Un screen shot, peut être?
Je viens de mettre a jour FF en version 3.6 et le probleme a disparu.

Bizarre autant qu'étrange ....

Je vais faire l'impasse pour le moment sur les irreductibles qui ne mettront pas FF à jour; ils ne verront pas la bordure gauche de mon tableau (ils devraient y survivre)

Merci

Olivier