valyan
-
Posts
2 -
Joined
-
Last visited
valyan's Achievements
Explorer (1/14)
0
Reputation
-
Здравствуйте. Есть страничка http://mobidel2.18r.ru/chat.php. При нажатии на объект из списка, я меняю размер шрифта, но вместе с этим меняется вся ширина строки объекта. Как мне высчитать padding-top и padding-bottom, чтобы после изменения размера шрифта не было смещения линий между объектами. Рассуждал так - раз увеличиваем шрифт с 11px до 13px, то нужно уменьшить поля, убрать сверху и снизу по 1px. Но в итоге все равно происходит смещение. Заранее спасибо!
-
Здравствуйте. У меня похожая проблема пытаюсь сделать тень для строки таблицы: <html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url] <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'> текст</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?