Problème avec style dotted

Question

twin

18 Oct 2008 à 19:02

Bonjour à tous,

Je reviens vers vous avec 2 petites questions que je n'arrive pas à résoudre depuis hier. J'abandonne mes recherches pour vous poser mes questions.

Mon premier problème est la taille d'un contour avec des pointillés sous IE. Ils sont fin sous Firefox, mais énorme avec IE. Existe t-il une solution pour corriger cela ?

border-bottom-width: thin;
border-bottom-style: dotted;
border-bottom-color: #8FC53F;

Mon deuxième problème concerne toujours les pointillés. Lorsque je passe la souris sur une cellule, les pointillés se supprime. Comment faire pour qu'ils restent visible ?

Voici ma page entière :

<!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>Document sans nom</title>
<style>
.pluginRow1, .pluginRow1 td {
	color : #707073;
	background-color : #F4F1F1;
	line-height : 30px;
border-bottom-width: thin;
border-bottom-style: dotted;
border-bottom-color: #8FC53F;
}
.pluginRow2, .pluginRow2 td {
color : #a5a5a5;
background-color : #FFF;
line-height : 30px;
border-bottom-width: thin;
border-bottom-style: dotted;
border-bottom-color: #8FC53F;
	


}
.pluginRow1 .pluginRollOver, .pluginRow2 .pluginRollOver, .pluginRollOver {
color : #E0F7BF;
background-color : #E0F7BF;
line-height : 30px;
border-bottom-width: thin;
border-bottom-style: dotted;
border-bottom-color: #8FC53F;

}

h2 {
	font-family: verdana;
	font-size: 11px;
	line-height:200%;
	color: black;
	text-decoration: none;
	font-style: normal;
	font-weight: bold;
	margin: 0;
padding: 0;
}
.lien {
	font-size: 10px;
	font-weight: normal;
	color: #455560;
	display:block;
	text-align:left;
	padding-top:2px;
	line-height: 13px;
	margin: 0;
	padding: 0;
	font-family: verdana;
}



.datedujour {
	font-family: verdana;
	font-size: 10px;
	color: #8FC53F;
	text-decoration: none;
	font-style: normal;
	line-height: normal;
}
.dateheure{
	font-family: verdana;
	font-size: 12px;
	color: #8FC53F;
	text-decoration: none;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
}
.lacategorie {
	font-family: verdana;
	font-size: 9px;
	color: #000000;
	text-decoration: none;
	font-style: normal;

}
</style>
</head>

<body>
<table width="606" height="0" cellspacing="0" cellpadding="0" border="0" align="center" style="font-size:14px">
<tbody>
<tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';"><td width="23%" align="center" class="tab">&nbsp;</td><td width="8%" class="tab">&nbsp;</td>
  <td width="30%" class="tab">+Populaire</td>
  <td width="39%" align="center" class="tab">1 | 2 | 3 | 4  | 5 | 6 </td>
</tr>
<tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab"><span class="datedujour">10 octobre</span><br />
  <span class="dateheure">10h34</span><br /> </td><td colspan="3" class="tab" valign="top"><h2>M&eacute;t&eacute;o pour le GP de Chine &agrave; Shanghai</h2>
    <span class="lien">Du soleil est pr&eacute;vu pour la dix-septi&egrave;me et avant derni&egrave;re&nbsp;(...)
    </span></td></tr><tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab"><span class="datedujour">10 octobre</span><br />
  <span class="dateheure">10h34</span><br /> </td><td colspan="3" class="tab"><h2>M&eacute;t&eacute;o pour le GP de Chine &agrave; Shanghai</h2>
    <span class="lien">Du soleil est pr&eacute;vu pour la dix-septi&egrave;me et avant derni&egrave;re&nbsp;(...)
    </span></td>
</tr>
<tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab"><span class="datedujour">10 octobre</span><br />
  <span class="dateheure">10h34</span><br /> </td><td colspan="3" class="tab"><h2>M&eacute;t&eacute;o pour le GP de Chine &agrave; Shanghai</h2>
    <span class="lien">Du soleil est pr&eacute;vu pour la dix-septi&egrave;me et avant derni&egrave;re&nbsp;(...)
    </span></td></tr><tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab"><span class="datedujour">10 octobre</span><br />
  <span class="dateheure">10h34</span><br /> </td><td colspan="3" class="tab"><h2>M&eacute;t&eacute;o pour le GP de Chine &agrave; Shanghai</h2>
    <span class="lien">Du soleil est pr&eacute;vu pour la dix-septi&egrave;me et avant derni&egrave;re&nbsp;(...)
    </span></td></tr><tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab">5</td><td colspan="3" class="tab">&nbsp;</td></tr><tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab">6</td><td colspan="3" class="tab">&nbsp;</td></tr><tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab">7</td><td colspan="3" class="tab">&nbsp;</td></tr><tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab">8</td><td colspan="3" class="tab">&nbsp;</td></tr><tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab">9</td><td colspan="3" class="tab">&nbsp;</td>
</tr>
<tr class="pluginRow1" onmouseover="className='pluginRollOver';" onmouseout="className='pluginRow1';">
<td width="23%" align="center" class="tab">10</td><td colspan="3" class="tab">&nbsp;</td>
</tr>
</tbody></table>
<br />
</body>
</html>

Merci d'avance pour votre aide Smiley cligne

@+

fvsch

18 Oct 2008 à 19:41

Pour le premier problème: donner une taille de bordure en pixels plutôt qu'avec le mot-clé «thin».

Pour le deuxième problème: un peu la flemme de déchiffrer le bloc de code donné pour tenter de trouver d'où ça peut bien venir. Une page en ligne et un coup de Firebug, ça irait tellement plus vite... Smiley cligne

twin

18 Oct 2008 à 19:51

Merci pour la taille en px. Ca fonctionne correctement maintenant.
Pour firebug, je ne connaissais pas. Je viens de l'installer; mais je ne comprend pas tout encore.

Mais je ne comprend pas d'où viens mon problème car mon code est identique.

En fait dans :

.pluginRow1 .pluginRollOver, .pluginRow2 .pluginRollOver, .pluginRollOver {
color : #E0F7BF;
background-color : #E0F7BF;
line-height : 30px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #8FC53F;
}

Il ne comprend pas qu'il faut mettre la bordure.

fvsch

18 Oct 2008 à 20:15

Heu... c'est moi ou ton JavaScript est mal écrit?

onmouseover="className='pluginRollOver';"

au lieu de

onmouseover="this.className='pluginRow1 pluginRollOver';"

yodaswii

18 Oct 2008 à 21:28

Florent V. a écrit :
Heu... c'est moi ou ton JavaScript est mal écrit?

C'est toi ! Smiley lol

Plus sérieusement, dans ce contexte le this est implicite. Smiley cligne

<oops>Tu faisais peut être plutôt référence à l'écrasement de la valeur originale de l'attribut class. Smiley smile

</oops>
Modifié par yodaswii (18 Oct 2008 - 21:34)

fvsch

19 Oct 2008 à 02:52

yodaswii a écrit :
Tu faisais peut être plutôt référence à l'écrasement de la valeur originale de l'attribut class.

Je faisais référence aux deux. Donc j'avais raison sur la moitié. Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Problème avec style dotted