28172 sujets

CSS et mise en forme, CSS3

[Résolu][Problème] Border dans un tableau sous Firefox

Bonjour à tous,

Je suis confronté à un problème que je n'avais remarqué (mais qui devait déjà être présent) ayant l'habitude de travailler sur de grande tailles.

Voilà mon problème :
J'ai fait cette semaine un calendrier en javascript, auquel j'ai associé un feuille de style CSS. Je travaille donc avec de petite case (td) de 17px de hauteur de de largeur, jusque là pas de soucis, tout passe bien. Le problème se situe quand j'ajoute une bordure de 1px solid, sous IE ça me fait une bordure normale (donc extérieure) mais sous Firefox, le bordure est extérieure sur les cotés (gauche droite) mais pour le reste (bas haut) la bordure est intérieure, ce qui a pour effet de rogner mes cases et me donne donc des rectangles au lieu de carrés.

Voici un extrait de code basique sur lequel le phénomène est remarquable :
table
{
text-align : center;
}

td
{
background-color : #000000;
border : 1px solid #ff0000;
width : 17px;
height : 17px;
}


<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>


Je dois avouer que je patoge ce ce coup là, donc si quelqu'un connait un moyen de remédier à ce problème, je lui en serai très reconnaissant.

Merci.
Modifié par Nynox (17 Jun 2008 - 20:29)
Modérateur
bonjour,

2 chose peuvent facilement agrandir de si petite cellule de tableau:

1) la taille de la police qui s'affiche dedans
2) des paddings lateraux par defaut (lisibilité des textes contenus décollés des bords).

GC
Merci de ta réponse mais le problème n'est pas que la cellule s'agrandit mais justement qu'elle se rétrécie, elle passe de 17*17 à 17*15 + bordure.
Modérateur
okay , pour moi , c'etait 21x24px avec ton extrait de code et ma police d'affichage par defaut.

Comme quoi Smiley smile

un line-height equivalent a la hauteur voulu devrait permettre de résevé , forcé cette hauteur .

sinon , je ne vois pas trop comment contrecarré ces effet de style par défaut.

test:

td
{
background-color : #000000;
border : 1px solid #ff0000;
width : 17px;
height : 17px;
color:#fff;
line-height:17px;
padding:0;
}


Maintenant le bug qui peut surgir , c'est de voir les chiffres sortir des cellules en aggrandissant la taille des caracteres . a 40 px par exemple pour ceux qui ne voit pas trop bien

GC

<edit>

<!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" lang="fr">
<head>
<title>test</title>
<style type='text/css'>table
{
text-align : center;
background:#999;
border:2px solid;
}

td
{
background-color : #000000;
border : 1px solid #ff0000;
width : 17px;
height : 17px;
color:#fff;
line-height:17px;
padding:0;
font-size:40px;
}
</style>
</head>
<body>
<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>
</body>
</html>

</>
Modifié par gcyrillus (17 Jun 2008 - 19:21)
Ah ben oui du coup avec line-height ça marche beaucoup mieux Smiley smile Je sais pas pourquoi j'y ai pensé.

Merci beaucoup pour le coup de main en tout cas.
Sujet clos
Aller à