Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > TABLE-LAYOUT в FF

Автор: GIK 20.4.2009, 17:25

Всем доброго времени суток.
Собственно вопрос. В FF не работает...

Автор: ksnk 20.4.2009, 17:29

Собственно ответ: table-layout в FF работает smile

Автор: GIK 20.4.2009, 17:57

Код


<TABLE width=50% table-layout=fixed><TBODY>
<TR>
  
   <TD height=127px class=TDInCamersShop>
          <TABLE class=TabInCamersShop table-layout=fixed><TBODY>
   <TR><TD class=TDInTabInCamersShop1><IMG src='charger.gif'></TD></TR>
   <TR><TD class=TDInTabInCamersShop2> Зарядные устройства</A></TD></TR>  
                         </TBODY></TABLE>
          </TD>
          
      </TR>     </TBODY> 
 </TABLE>

разрешение фото по высоте больше чем 150px. У меня в IE все работает, в FF нет...

Автор: ksnk 20.4.2009, 18:27

Хм... Забавный параметр table-layout smile

я его обычно видел в секции style. Может по этому и не работает?
А как оно должно выглядеть-то?

Добавлено через 2 минуты и 1 секунду
Обычно, table-layout:fixed определяет не высоту колонок , а их ширину. Она еще может настраиваться тегами COL.

Автор: bars80080 20.4.2009, 19:33

честно говоря, не помню ни одного атрибута тэга, в котором был бы дефис

пропишите его через css

Автор: GIK 22.4.2009, 15:18

пример можно?

Автор: Soah 22.4.2009, 17:38

http://www.htmlbook.ru/css/table-layout.html

Автор: ksnk 22.4.2009, 17:38

Пример?

Вот, кусок кусок "основной" разметки страницы одного проекта :

Код


<style tyle="text/css">
table.fixed { 
   table-layout:fixed;
}

.size12 {
   font-size:12px;
}

.long {
   width:100%;
}
</style>
...
<table class="long fixed size12"> 
    <col width="30%"><col width="375px"> 
    <col width="50px"><col width="20%"> 
    <col width="559px"><col width="50%"> 
    <tr> ...

fixed работает нормально только в комбинации с col'ами.

Автор: GIK 22.4.2009, 17:50

СПАСИБО!!! smile

Добавлено через 6 минут и 55 секунд
PS: не тот смайлик поначалу поставил...

Автор: GIK 23.4.2009, 15:35

Народ че то у меня нифига ничего не получается с этими тегами COL...

Если кто сможет сделать так чтобы в этом коде картинка размером больше 150px невылазила за пределю ячейки в 100рх, буду благодарен.

Код


<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Тег COL, параметр align</title>
 </head>

<style tyle="text/css">
table.camersShop { 
   table-layout:fixed; 
   width:100%;
   border:1 px; 
}

table.camersShop TD{ 
   table-layout:fixed; 
   height:50px; 
   border:1 px;
}

</style>


 <body>


  <TABLE class=camersShop border=1>
         <TBODY>  
          <COL width="120px" height="50px"><COL width="120px"><COL width="120px"><COL width="120px"><COL width="120px"><COL width="120px">
          <COL width="120px">
          <TR>
           <TD width=6% border=1></TD>
           <TD width=25%><IMG src='foto/shopmenu/foto.gif'></TD>
           <TD width=6%></TD>
           <TD width=25%><IMG src='foto/shopmenu/charger.gif'></TD>
           <TD width=6%></TD>
           <TD width=25%><IMG src='foto/shopmenu/camers.gif'></TD>
           <TD width=7%></TD>

           </TR> 
        </TBODY>      
       </TABLE>

 </body>
</html>

Как сделать так чтобы в FF работало? Высота ячейки выше чем 50pх, если изображение выше...

Автор: ksnk 23.4.2009, 17:57

Чего-то я так и не понл, что-же должно получится ;-)
Зачем указывать размеры и в TD и в COL'ах?

Чтобы из ячейки не вылезало - нужно обернуть дивом и в нем выставить размер. ( Ну да! Не зря люди не любят табличную верстку smile

)

Код


<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Тег COL, параметр align</title>
 </head>
<style style="text/css">
table.camersShop { 
   table-layout:fixed; 
   width:100%;
   border:1 px; 
}
table.camersShop TD{ 
   border:1 px;
}
table.camersShop div{ 
   height:50px; 
   overflow:hidden;
}
tr.stick td {
   height:1px; 
   overflow:hidden;
}
</style>
 <body>
  <TABLE class=camersShop border=1>
          <COL width="25%"><COL width="120px">
          <COL width="25%"><COL width="120px">
          <COL width="25%"><COL width="120px">
        <COL width="25%">
          <TR>
           <TD border=1></TD>
           <TD ><div><IMG src='nitki2.jpg'></div></TD>
           <TD ></TD>
           <TD ><div><IMG src='foto/shopmenu/charger.gif'></div></TD>
           <TD ></TD>
           <TD ><div><IMG src='foto/shopmenu/camers.gif'></div></TD>
           <TD ></TD>
           </TR>
<tr class="stick"><td></td> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
       </TABLE>
 </body>
</html>

Последняя строка с классом stick - чтобы в Хроме не глючило...

Автор: GIK 28.4.2009, 15:31

Спасибо большой smile