unificare due div in uno

[Progeny]

Salve, ho un codice HTML del tipo:

<div class="tab_panel"><span>Contatti</span></div>
<div>
<table style="width: auto;" cellpadding="1" cellspacing="1">
  <tr>
    <td>[img]images/profile/msn.png[/img]</td>
    <td>MSN</td>
    <td><?php echo($profile['msn']); ?>
  </tr>
  <tr>
    <td>[img]images/profile/skype.png[/img]</td>
    <td>Skype</td>
    <td><?php echo($profile['skype']); ?>
  </tr>
</table>
</div>

ed il seguente codice CSS

/* Tab Panel */
div.tab_panel {
  /*width: 178px;*/
  width: auto;
  height: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 30px;

  background: url(../images/css/tab/tab2.png) no-repeat;
  border-bottom: 1px solid #BCD2E6;

  font-size: 10px;
  font-weight: bold;
  text-indent: 10px;
}

div.tab_panel:hover {
  color: #FF9C00;
  background: url(../images/css/tab/tab1.png) no-repeat;
} 

mi piacerebbe tanto per avere le cose ordinate, usare un unico div... tipo il codice HTML diverebbe:
<div class="tab_panel">
<p class="title">Contatti</p>
<table>...</table>
</div>

qualcuno ha qualche suggerimento? c'è da tener presente che c'è anche l'hover su tab_panel

[Mich_]

Il codice da te postato non e` semanticamente ne` sintatticamente (XHTML) corretto.
Invece il secondo va bene. Se il testo e` un titolo, pero` dovresti usare il tag <h1> (o <h2> o quello che ci va) al posto del

.

Il tag

(e anche i tag <hX>) e` di tipo blocco, per cui puoi applicarvi tutte le formattazioni del tuo div.tab_panel.


Se la cosa deve funzionare anche in IE6 la pseudoclasse :hover la devi applicare a un tag <a>, che puoi inserire pleonastico dentro il




Attenzione che stai usando degli attributi html che non sono compatibili con un buon uso dei CSS: gli attributi di formattazione (cellpadding="1" cellspacing="1" border="0") devono essere eliminati dall'HTML e spostati nel CSS.

Altro problema: la dimensione del font puo` essere troppo piccola: fai meglio usare una dimensione 100% e regolare le altre dimensioni di conseguenza (tremite le unita` em). Altrimenti rischi che il browser aumenti il font e il tutto risulti sballato.
Non puoi conoscere la dimensinoe del font che vede l'utente: i browser possono definire un font minimo (ad esempio io tengo il font minimo a 14px, dato che ho i px molto piccoli).

[Progeny]

CSS:

div.tab_box {
  padding-bottom: 5px;
  border-bottom: 1px solid #BCD2E6;
}

div.tab_box h4 {
  background: url(../images/css/tab/tab2.png) no-repeat;
  border-bottom: 1px solid #BCD2E6;
  font-size: 100%;
  line-height: 30px;
  text-indent: 10px;
}

div.tab_box h4:hover {
  color: #FF9C00;
  background: url(../images/css/tab/tab1.png) no-repeat;
} 

HTML:

<div class="tab_box"><h4>Attivita`</h4>
  <div>
    <table style="width: auto;" cellpadding="1" cellspacing="1">
      <tr>
        <td>[img]images/profile/reg_date.png[/img]</td>
        <td>Iscritto dal</td>
        <td><?php echo($profile['registration_date']); ?></td>
      </tr>
      <tr>
        <td>[img]images/profile/time.png[/img]</td>
        <td>Ultima visita</td>
        <td><?php echo($seen); ?></td>
      </tr>
      <tr>
        <td>[img]images/profile/chart.png[/img]</td>
        <td>Voti ricevuti</td>
        <td><?php echo(Profile_CountVotes($uid, $mysql)); ?></td>
      </tr>
    </table>
  </div>
</div>

va meglio così?
ps.: cell padding e cell spacing per una tabella, in CSS come si scrive?