Тема: box-shadow в TR
Показать сообщение отдельно
  #2 (permalink)  
Старый 25.09.2013, 22:57
Аспирант
Отправить личное сообщение для valyan Посмотреть профиль Найти все сообщения от valyan
 
Регистрация: 05.11.2012
Сообщений: 55

Здравствуйте. У меня похожая проблема
пытаюсь сделать тень для строки таблицы:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.gradient 
{
    background: #fefcea; /* Для старых браузров */
    background: -moz-linear-gradient(top, #f5f5f5, #d2d2d2); /* Firefox 3.6+ */
    /* Chrome 1-9, Safari 4-5 */
    background: -webkit-gradient(linear, left top, left bottom, 
                color-stop(0%,#f5f5f5), color-stop(100%,#d2d2d2));
    /* Chrome 10+, Safari 5.1+ */
    background: -webkit-linear-gradient(top,#f5f5f5, #d2d2d2);
    background: -o-linear-gradient(top, #f5f5f5, #d2d2d2); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f5f5f5, #d2d2d2); /* IE10 */
    background: linear-gradient(top, #f5f5f5, #d2d2d2); /* CSS3 */ 
    -moz-box-shadow: 0px 2px 4px red;
    -webkit-box-shadow:  0px 2px 4px red;
    box-shadow:  0px 2px 4px red;
    display: block;
}
</style>
</head>
<body>
<table width="100%" height="100%" style='border-collapse: collapse;'>
  <tr align="center" height="25px" >
    <td class="obj_el" colspan="7" bgcolor="#363636"><img style="position: relative; top: 4px;" src='api/Images/message_icon.png'>&nbsp;&nbsp;текст</td>
  </tr>
  <tr class="gradient">
  	<td class="type_obj" align="center" valign="middle" id="drivers"><img src='api/Images/chat_courier_icon.png'><br/>123<div class='circle' id='circle_drivers' style='position: relative; top: -40px;left: 30px;'></div></td>
    <td><div class="line-2"></div></td>
    <td class="type_obj" align="center" valign="middle" id="warehouse"><img src='api/Images/chat_tk_icon.png'><br/>1234<div class='circle' id='circle_warehouse' style='position: relative; top: -40px;left: 30px;'></div></td>
    <td><div class="line-2"></div></td>
    <td class="type_obj" align="center" valign="middle" id="disp"><img src='api/Images/chat_disp_icon.png'><br/>3333<div class='circle' id='circle_disp' style='position: relative; top: -40px;left: 30px;'></div></td>
    <td><div class="line-2"></div></td>
    <td align="left" valign="middle" width="76%" style='font-family: Segoe_light; padding-left: 20px; color: #2878af; font-size: 21px;'>Имя </td>
  </tr>
  <tr>
  	<td colspan="6" bgcolor="#363636"><font style="font-size:13px; padding: 3px 0px 3px 20px;color: #D3D3D3;">454</font></td>
  	<td valign="middle"><div id='NameObj'></div></td>
  </tr>
  <tr>
  	<td colspan="6"  bgcolor="#363636" style='padding: 0px 20px 0px 20px;'><div class='line-1'></div></td>
  	<td style='padding: 0px 20px 0px 20px;'><div id='one_lin' style='display: none; border-top: 1px solid #c8c8c8; height: 0px;'></div></td>
  </tr>
  <tr>
    <td class="obj_el" colspan="6" valign="top" bgcolor="#363636" id="list_obect"></td>
    <td id="mess_text" valign="top"></td>
  </tr>
</table>
</body>
</html>

выходит не то, что я ожидал(((

также делаю вот:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.gradient 
{
    background: #fefcea; /* Для старых браузров */
    background: -moz-linear-gradient(top, #f5f5f5, #d2d2d2); /* Firefox 3.6+ */
    /* Chrome 1-9, Safari 4-5 */
    background: -webkit-gradient(linear, left top, left bottom, 
                color-stop(0%,#f5f5f5), color-stop(100%,#d2d2d2));
    /* Chrome 10+, Safari 5.1+ */
    background: -webkit-linear-gradient(top,#f5f5f5, #d2d2d2);
    background: -o-linear-gradient(top, #f5f5f5, #d2d2d2); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f5f5f5, #d2d2d2); /* IE10 */
    background: linear-gradient(top, #f5f5f5, #d2d2d2); /* CSS3 */ 
    -moz-box-shadow: 0px 2px 4px red;
    -webkit-box-shadow:  0px 2px 4px red;
    box-shadow:  0px 2px 4px red;
    display: block;
}
</style>
</head>
<body>
<table width='100%' height='100%' id='mes_dialog' style='border-collapse: collapse;'><tr><td colspan='2'><div id='content_mess'></div></td></tr><tr height='60px' id='tr_comments' align='center' valign='middle' class='gradient' ><td style='padding: 15px 8px 0px 15px; width: 100%;'><textarea placeholder='Введите сообщение' id='comments' rows='1' cols='80'></textarea></td>													<td style='padding: 15px 8px 0px 15px;'><input type='image' src='api/Images/chat_enter_icon.png' id='send_mess'></td>
</tr>
</body>
</html>										 	</table>

Свойство display применял разное...Можно ли как-то сделать тень в данном случае, или переделать таблицу на div?
Ответить с цитированием