Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] komórki tabeli i line-height
Forum PHP.pl > Forum > Przedszkole
Skie
Witam,
Mam taki problem z tabelami w HTML'u, że przeglądarka opera daje im strasznie dużą wysokość (height: 17px; jest całkowicie olewane)

Kod
             <table cellpadding=0 cellspacing=0 align=center rules=rows class=rows_col>
      
               <tr>
               <td valign=top style="width: 70px;" class=np>{$Lang[7]}</p></td>
               <td valign=top style="width: 160px;" class=np align=right><b>test1</b></td>
               </tr>
               <tr>
               <td valign=top style="width: 70px;" class=p>{$Lang[8]}</p></td>
               <td valign=top style="width: 160px;" class=p align=right><b>test2</b></td>
               </tr>
  
                   itd....
  
               </table>


Plik CSS wygląda tak:

Kod
td.p {
       background-color: #000;
       padding: 2px;
       height: 17px;
       font-size: 11px;
       color: #fff;
   }
  
   td.np {
       background-color: #333;
       padding: 2px;
       height: 17px;
       font-size: 11px;
       color: #fff;
   }
  
   table.rows_col {
       color: #696969;
   }


Na FF ładnie wygląda:



A na Operze niewiadomo skąd taka wyskość się bierze:



-----------------------------------

Komórki tabeli wyglądają identycznie dopiero po ustawiniu: line-height: 0px; - ale to się mija z celem, a jak ustawię jakąkolwiek inną wartość niż 0 to tabele znów zaczynają się rozjeżdżać ;/


Pomoże ktoś?


EDIT:

Temat do zamknięcia - napisałem kod HTML tabeli od nowa i wszystko ładnie działa teraz winksmiley.jpg Wygląda na to, że coś nie tak z valign=top było.
JoShiMa
Nie tak:
  1. <table cellpadding=0 cellspacing=0 align=center rules=rows class=rows_col>


tylko tak (być może brak " powoduje dziwne zachowanie w operze):
  1. <table cellpadding="0" cellspacing="0" align="center" rules="rows" class="rows_col">


a najlepiej to rak (skoro i tak używasz stylów):

  1. <table class="rows_col">
  2. <tr class"np"><td></td><th></th></tr>
  3. <tr class"p"><td></td><th></th></tr>
  4. ...

plus style:
  1. table.rows_col {
  2. color: #696969;
  3. border-collapse:collapse;
  4. empty-cells: show;
  5. }
  6.  
  7. table.rows_col tr,th{
  8. border-bottom: #ffffff solid 1px;
  9. border-top: #ffffff solid 1px;
  10. padding: 2px;
  11. height: 17px;
  12. font-size: 11px;
  13. color: #fff;
  14.  
  15. }
  16.  
  17. table.rows_col tr.np{
  18. background-color: #333;
  19. }
  20.  
  21. table.rows_col tr.p{
  22. background-color: #000;
  23. }
  24.  
  25. table.rows_col th{
  26. font-weight: bold;
  27. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.