| |
|
|
| | Здравствуйте уважаемое сообщество,
Ни подскажете почему образовывается зазор в ячейке таблицы где содержится рисунок.
html
...
<table class="top_in" cellpadding="0" cellspacing="0">
<tr>
<td class="top_in_left">
<img src="images/bg_top_in_left.jpg" width="15" height="75" alt="" />
</td>
<td class="top_in_center">
<img src="images/bg_top_in_center.jpg" height="75" alt="" />
</td>
<td class="top_in_right">
<img src="images/bg_top_in_right.jpg" width="6" height="75" alt="" />
</td>
</tr>
</table>
...
|
css
.top_in { border-collapse:collapse; width:100%; height:75px; border:1px solid red; }
td.top_in_left { vertical-align:top; width:15px; height:75px; margin:0px; padding:0px; border:1px solid red; }
td.top_in_center { vertical-align:top; width:100%; height:75px; margin:0px; padding:0px; border:1px solid black; }
td.top_in_right { vertical-align:top; width:6px; height:75px; margin:0px; padding:0px; border:1px solid black; }
|
По коду все вроде правильно строгая высота указана как для таблицы, так и для ячеек, border-collapse:collapse;
Зазора не должно быть, но он почему то есть.
Ни скажете как можно решить эту проблему? | |
| |
|
|
| |
|
|
| |
для: pautina
(10.11.2010 в 12:38)
| | | Каждая ячейка с таблицей в Вашей записи содержит:
1) перевод строки
2) много-много пробелов
3) тег <IMG>
4) много-много пробелов
Браузер подряд идущие переводы строк и пробелы преобразует в одинарные пробелы.
вы итоге у Вас получается:
1) пробел
2) тег <img>
3) пробел
Всякий пробел браузером воспринимается как текст, имеющий какой-то размер шрифта. В данном случае - то, который у Вас по умолчанию.
Резюме: или избавьтесь от пробелов, или в стилях дайте нулевой размер шрифту.
Избавиться от пробелов можно так (пример):
<td class="top_in_left"><img src="images/bg_top_in_left.jpg" width="15" height="75" alt="" /></td>
|
PS. Ноль - это означает НИЧЕГО.
А "ничего" размерности не имеет.
Потому правильным будет не margin:0px;, а margin:0;
PS2. Те атрибуты тегов, кои имеют аналоги в CSS, лучше не использовать. Т.е. правильным будет:
<img src="images/bg_top_in_left.jpg" style="width: 15px; height: 75px" alt="" />
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(10.11.2010 в 13:42)
| | | Можно еще попробовать сделать для class(top_in_left) font-size:0; | |
| |
|
|
| |
|
|
| |
для: АЯ
(10.11.2010 в 13:42)
| | | >Те атрибуты тегов, кои имеют аналоги в CSS, лучше не использовать
Это интересно. А почему, есть некая выгода от этого? | |
| |
|
|
| |
|
|
| |
для: sim5
(10.11.2010 в 15:41)
| | | Особой выгоды нет.
Есть следующие соображения:
- все такие атрибуты (имеющие аналоги в CSS) уже в спецификации HTML4.01 объявлены deprecated
- установив атрибут непосредственно в теге, Вы можете случайно изменить значение соответствующего правила стиля в блоке/файле стилей. А правила стилей имеют приоритет перед атрибутами. А потом будете тупо смотреть на тег <IMG>, у которого явно в атрибуте прописано width="15", а он у Вас по ширине в реале - 200 пикселей (здесь, на этом форуме, как-то был вопрос - человек бился головой об стену, ибо не мог понять причину "не того" размера, который он прописал в атрибуте). | |
| |
|
|
| |
|
|
| |
для: АЯ
(10.11.2010 в 16:00)
| | | Ясно, благодарю. Судя из вышесказанного, выгода все таки есть. | |
| |
|
|
| |
|
|
| |
для: sim5
(10.11.2010 в 16:25)
| | |
Всякий пробел браузером воспринимается как текст, имеющий какой-то размер шрифта. В данном случае - то, который у Вас по умолчанию.
|
Поставил нулевой размер шрифта для таблицы, зазоры не изчезли, почему? | |
| |
|
|
| |
|
|
| |
для: pautina
(11.11.2010 в 12:58)
| | | Вам АЯ рекомендовал убрать пробелы между тегами таблицы и вложенными в них тегами, а не размер шрифта. | |
| |
|
|
| |
|
|
| |
для: sim5
(11.11.2010 в 13:03)
| | | Это верно.
Правда у меня в вёрстке так много таблиц, что сам потом боюсь запутаться в этом.
Пришлось на div делать.
Там правда вопрос с повторением фона был
хотел сделать чтоб выполнялись эти скрипты
<!-- края фона для center_center -->
<script type="text/javascript">
onload = function ()
{
var iH = document.getElementById('center_center').offsetHeight;
var iH2 = document.getElementById('center_left').offsetHeight;
var iH3 = document.getElementById('center_right').offsetHeight;
if(iH>iH2) {
document.getElementById('center_left').style.height = iH+'px';
document.getElementById('center_right').style.height = iH+'px';
}
}
</script>
<!-- сайдбар по высоте контента -->
<script type="text/javascript">
onload = function ()
{
var iH4 = document.getElementById('content').offsetHeight;
var iH5 = document.getElementById('sideLeft').offsetHeight;
if(iH4<iH5) {
iH4=583;
document.getElementById('sideLeft').style.height = iH5+'px';
}
if(iH4>iH5) {
document.getElementById('sideLeft').style.height = iH4+'px';
}
}
</script>
|
Нужно поставить всё в 1 onload = function ()
Ставил но где то видимо скобку теряю, ни поможете? | |
| |
|
|
