[CSS][Problem] Niechciany odstęp między komórkami

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
damian_m_m
Posty: 4
Rejestracja: wt lut 07, 2006 9:33 pm

[CSS][Problem] Niechciany odstęp między komórkami

Post autor: damian_m_m »

Witam Wszystkich (to mój pierwszy post).
Problem jest taki:
Obrazek
czyli jak widać na obrazku, niechciany odstęp i przesunięcie pomiedzy komórkami w tabeli o 1px (występuje pod Operą i IE). Dodam że widoczne "czerwone" linie są grafiką, a nie obramowaniem tabeli.

styl css zdefiniowany dla tabeli to:

Kod: Zaznacz cały

.tabela
{
 border-style: none;
 border-width: 0px;
 border-spacing: 0px;
margin: 0px; padding: 0px;
}
Prosze o radę co może być przyczyną takiego stanu rzeczy.
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: [CSS][Problem] Niechciany odstęp między komórkami

Post autor: Stig »

Przedstaw kompletny kod (włącznie z markup'em). W innym wypadku trudno będzie Ci efektywnie pomóc...
damian_m_m
Posty: 4
Rejestracja: wt lut 07, 2006 9:33 pm

Re: [CSS][Problem] Niechciany odstęp między komórkami

Post autor: damian_m_m »

OK wklejam:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">

<title>sknp</title>

<link href="css\ban_gora.css" rel="stylesheet" type="text/css">
<link href="css\tresc.css" rel="stylesheet" type="text/css">
<link href="css\stopka.css" rel="stylesheet" type="text/css">
</head>

<body class="tlo">
      <div >
      <table class="tabela" cellspacing="0" style="margin: 10px auto;">
             <tr>
                 <td colspan="2">
<!-- tutaj zaczyna się gorny baner -->
                     <table class="tabela" cellspacing="0">
      <tr>
          <td colspan="5" class="cien_gora"></td>

      </tr>
      <tr>
          <td rowspan="3" class="cien_lewy"></td>
          <td rowspan="2" class="logo_1"></td>
          <td class="lewo_od_uam"></td>
          <td class="baner_uam"></td>
          <td class="prawo_od_uam"></td>
      </tr>
      <tr>
          <td colspan="3" class="sknp_glowne">ghfdhfdhd</td>
      </tr>
      <tr>
          <td class="menu_pasek">MENU</td>
          <td colspan="3" class="ig_pasek">ghfdhfdhfdh</td>
          </tr>
</table>

                 </td>
             </tr>
<!-- tutaj zaczyna sie srodek ,czyli lewe menu i glowne okno strony Wlasnie
z ta czescia mam problem  -->
             <tr>
                 <td class="menu_tlo">
                 <div class="menu">
    <ul>
        <li>Strona główna</li>
        <li>Aktualno¶ci</li>
        <li>Zarz±d</li>
        <li>Statut</li>
        <li>Linki</li>
        <li>Kontakt</li>
    </ul>
</div>
    
                 </td><td class="glowna_tlo">
                  <div class="glowna">
strona głowna- przykladowy tekst
</div>
                 </td>
              </tr>
<!-- tutaj zaczyna sie stopka -->
              <tr>
                  <td colspan="2">
                  <table class="tabela_stopka" cellspacing="0">
       <tr>
           <td rowspan="2" class="stopka_tlo"></td>
           
           <td class="dm_logo"></td>
           
           <td rowspan="2" class="lewo_od_dm"></td>
      </tr>
      <tr>
           <td class="dol_od_dm"></td>
      </tr>
</table>
                  </td></tr>
      </table>
     </div>
</body>

</html>
dla css:

Kod: Zaznacz cały

.tabela
{
 border-style: none;
 border-width: 0px;
 border-spacing: 0px;
margin: 0px; padding: 0px;
}

.menu_tlo {
 border-style: none;
 border-width: 0px;
 border-spacing: 0px;
margin: 0px; padding: 0px;

width: 164px;
background-image: url(../images/menu_tlo.jpg);
background-repeat: repeat-y;
background-position: top left;
}

.menu {
min-height: 410px}

.glowna_tlo {
 border-style: none;
 border-width: 0px;
 border-spacing: 0px;
margin: 0px; padding: 0px;

width: 606px;
background-image: url(../images/glowna_tlo.jpg);
background-repeat: repeat-y;
background-position: top ;
}

.glowna {
min-height: 410px;}

.srodek {
text-align: center;}

.tlo {
background-color: #F1DEBC;}
Nie są to wszystkie style a jedynie te dla "środkowej" cęści strony (dla nagłówka i stopki nie wklejałem). Będę wdzięczny za pomoc, bo sam już nie wpadnę co jest źle.
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: [CSS][Problem] Niechciany odstęp między komórkami

Post autor: Stig »

W dalszym ciągu IMHO to za mało na konkretną pomoc. Przedstaw kompletny kod - najlepiej zaś całą stronę, łącznie z grafikami. Póki co mogę poradzić tylko tyle, że tabele służą do przekazywania danych tabelarycznych, nie zaś do tworzenia układu strony - polecam prezentację "Dlaczego układ na tabelkach jest głupi: opis problemu i jego rozwiązania".
damian_m_m
Posty: 4
Rejestracja: wt lut 07, 2006 9:33 pm

Re: [CSS][Problem] Niechciany odstęp między komórkami

Post autor: damian_m_m »

Wiem, że nie powinno się robić layout'u na tabelach, ale z div'ami sobie nie radzę na tyle mocno. Doucze się niedługo. A prezentację, którą podałeś czytałem, ale w wersji angielskiej. Ok, dzięki za chęć pomocy, nie będę wklejał więcej kodu, bo i tak nie mam gdzie wrzucić całej strony żeby pokazać. Spojrzę na to jutro.
damian_m_m
Posty: 4
Rejestracja: wt lut 07, 2006 9:33 pm

Re: [CSS][Problem] Niechciany odstęp między komórkami

Post autor: damian_m_m »

Poradziłem sobie :) Przerobiłem stronę na div'y i problem nie istnieje. Od dzisiaj nie stosuje już znaczników tabel dla innych celów niż powinno się. Teraz czuję, że mam pełną (prawie) kontrolę nad tym co robię.
Pozdr
ODPOWIEDZ