Ciao A tutti

Io ho inserito nella mia pagina un "div" con immagine come sfondo, poi un menu' fatto con css e per finire ho continuato tradizionalmente con una tabella per fare il lay out perchè non sono molto esperta.

La tabella ed i suoi contenuti vanno a finire sotto l'immagine di sfondo, quindi non si vede niente...

C'è qualcuno che sa dirmi perchè?
I css e le tabelle possono coesistere?
Esiste qualche modo...?
AIUTO

Aggiungo anche il codice per farmi capire meglio. Per me è un mistero!!
Grazie comunque per l'aiuto
ciao



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title></title>



<DIV STYLE="position:absolute; top:-5px; left:0px; width:782px; height:422px; background-image: url(imgs/bg4.gif); background-repeat: no-repeat">
</DIV>

<style type="text/css">

div#nav ul{"position:absolute; top:68px; left:1px; width: 782px;height: 20px;overflow: hidden;
list-style-type: none;margin: 0;padding: 0;
background:url(imgs/menu.gif) no-repeat 0 -30px}

div#nav li{margin: 0;padding: 0}
div#nav li,div#nav a{float: left;width: 130px;height: 20px}

div#nav a{text-indent: -9000px;text-decoration: none;padding: 20px 0 0 0;
overflow: hidden; height: 0px !important; height /**/:20px;
background-image: url(imgs/menu.gif)}

li#mhome a{background-position: 0px 0px}
li#mhome a:hover{background-position: 0 -20px}
body#home li#mhome a{background-position: 0 -40px}

li#mcat a{background-position: -130px 0px}
li#mcat a:hover{background-position: -130px -20px}
body#cat li#mprod a{background-position: -130px -40px}

li#mrobot a{background-position: -260px 0px}
li#mrobot a:hover{background-position: -260px -20px}
body#robot li#mserv a{background-position: -260px -40px}

li#mtop a{background-position: -390px 0px}
li#mtop a:hover{background-position: -390px -20px}
body#top li#mport a{background-position: -390px -40px}

li#mcont a{background-position: -520px 0px}
li#mcont a:hover{background-position: -520px -20px}
body#cont li#mcont a{background-position: -520px -40px}

li#mriserv a{background-position: -650px 0px}
li#mriserv a:hover{background-position: -650px -20px}
body#riserv li#mcont a{background-position: -650px -40px}
</style>

</head>

<body id="home" leftmargin=0 topmargin=0 marginheight=0 marginwidth=0>
<div id="nav">
<ul>
<li id="mhome">Home Page
<li id="mcat">Catalogo
<li id="mrobot">Robot
<li id="mtop">Top Combi
<li id="mcont">Contatti
<li id="mriserv">Area clienti[/list]
</div>


<table width="782" height="405" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="421" height="64" colspan="2" valign="top" bgcolor="#666666">[img]imgs/foto_top.jpg[/img]</td>
<td width="361" height="64" align="center" valign="top" bgcolor="#666666">[img]imgs/logo.gif[/img]</td>
</tr>
<tr>
<td width="210" height="167" align="right" valign="middle">[img]imgs/foto1.gif[/img]</td>
<td></td>
<td>news</td>
</tr>
<tr>
<td width="210" height="158" align="right" valign="middle">[img]imgs/foto2.gif[/img]</td>
<td>bandierine</td>
<td>indirizzo</td>
</tr>
</table>





</body>
</html>