<html>
<head>
<title><kzlm!</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
<td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="210px" height="8px" />
</td>
<td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
</tr>
</table>
</body>
</html>
Пространство под изображением в таблице
Помогите, пожалуйста, кто-нибудь...
есть обычный html:
В опере, фаерфоксе выглядит так:
В эксплорере так:
:stupid:
Уже что только не делал... ничего не помогает. Причем, если растянуть картинку на 30px в высоту, то ситуация будет такая:
P.S. Эксплорер 7й...
Картинку в коде загрузил на ipicture для удобства... там один пиксель, коричневого цвета.
Пожалуйста, помогите.
есть обычный html:
Код:
В опере, фаерфоксе выглядит так:
В эксплорере так:
:stupid: Уже что только не делал... ничего не помогает. Причем, если растянуть картинку на 30px в высоту, то ситуация будет такая:
P.S. Эксплорер 7й...
Картинку в коде загрузил на ipicture для удобства... там один пиксель, коричневого цвета.
Пожалуйста, помогите.
Привет. Мне тоже некогда нередко приходилось с подобным нюансом IE сталкиваться. Причина такого поведения кроется в следующем. Если загрузить твой html в IE, то ячейки TD кроме IMG также будут содержать по одному элементу типа TEXT_NODE сразу за IMG (если напишешь что-нибудь после img, то этот текст будет принадлежать этому TEXT_NODE элементу). Если загрузить эту же страницу в Chrome, или Opera, то TEXT_NODE также появится и до IMG. НО! Если TEXT_NODE не содержат фактически текста (т. е. пусты), то Chrome и Opera пренебрегают ими, а IE нет. IE ведет себя также, как если бы элементы TEXT_NODE содержали текст (в данном случае и, наверное, аналогичных).
Я ниже привел код, где постарался отразить эти нюансы. Добавил кнопки, которые показывают содержимое того, о чем говорится в названиях кнопок. Первая таблица — исходная, которую привел ты. Вторая с текстом в ячейках, чтобы показать, откуда ноги растут. Третья и четвертая отражают два варианта решения проблемы.
Первый способ заключается в том, чтобы заключить картинку в DIV. При этом вокруг DIV не образуются элементы TEXT_NODE и внутри него, вокруг IMG картина та же. В итоге получаем, что IE не пытается уместить в ячейки то, чего нет, и ведет себя так же как и другие браузеры (opera, chrome, ff у меня нет). Аналогично на месте DIV себя ведут P и OBJECT
Второй способ — это задание размера шрифта 0px для ячеек. При этом сами элементы TEXT_NODE остаются, но, не имея размера, не "мешают". Результат в обоих случаях аналогичный.
Есть еще способ — большинство элементов при задании стиля display: block тоже пренебрегают размером пустых TEXT_NODE элементов. Его в код не добавил.
Код:
Я ниже привел код, где постарался отразить эти нюансы. Добавил кнопки, которые показывают содержимое того, о чем говорится в названиях кнопок. Первая таблица — исходная, которую привел ты. Вторая с текстом в ячейках, чтобы показать, откуда ноги растут. Третья и четвертая отражают два варианта решения проблемы.
Первый способ заключается в том, чтобы заключить картинку в DIV. При этом вокруг DIV не образуются элементы TEXT_NODE и внутри него, вокруг IMG картина та же. В итоге получаем, что IE не пытается уместить в ячейки то, чего нет, и ведет себя так же как и другие браузеры (opera, chrome, ff у меня нет). Аналогично на месте DIV себя ведут P и OBJECT
Второй способ — это задание размера шрифта 0px для ячеек. При этом сами элементы TEXT_NODE остаются, но, не имея размера, не "мешают". Результат в обоих случаях аналогичный.
Есть еще способ — большинство элементов при задании стиля display: block тоже пренебрегают размером пустых TEXT_NODE элементов. Его в код не добавил.
Код:
Код:
<html>
<head>
<title><kzlm!</title>
</head>
<body>
Table1: <input type="button" id="btn1" value="Table1_1stTD_Children">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td id="a">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
<td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="210px" height="8px" />
</td>
<td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
</tr>
</table>
Table2: <input type="button" id="btn2" value="Table2_1stTD_Children">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td id="b">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />Вот
</td>
<td>
Оно<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="210px" height="8px" />
</td>
<td>
Ка<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />к
</td>
</tr>
</table>
Table3: <input type="button" id="btn3" value="Table3_1stTD_Children"> <input type="button" id="btn31" value="Table3_1stTD_1stDIV_Children">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td id="c">
<div id="d"><img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" /></div>
</td>
<td>
<div><img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" /></div>
</td>
<td>
<div><img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" /></div>
</td>
</tr>
</table>
Table4: <input type="button" id="btn4" value="Table4_1stTD_Children">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="font-size: 0px" id="e">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
<td style="font-size: 0px">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
<td style="font-size: 0px">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
</tr>
</table>
<script language="javascript">
function showChildren(el) {
ch = el.childNodes;
s = ""
for (i = 0; i < ch.length; i++) {
s += ch.item(i).nodeName + "\n";
}
alert(s);
}
function __attachEvent(el, ev, fun) {
if (window.addEventListener) {
el.addEventListener(ev, fun, false);
} else {
el.attachEvent("on" + ev, fun);
}
}
__attachEvent(document.getElementById("btn1"),"click",function() {showChildren(document.getElementById("a"))});
__attachEvent(document.getElementById("btn2"),"click",function() {showChildren(document.getElementById("b"))});
__attachEvent(document.getElementById("btn3"),"click",function() {showChildren(document.getElementById("c"))});
__attachEvent(document.getElementById("btn31"),"click",function() {showChildren(document.getElementById("d"))});
__attachEvent(document.getElementById("btn4"),"click",function() {showChildren(document.getElementById("e"))});
</script>
</body>
</html>
<head>
<title><kzlm!</title>
</head>
<body>
Table1: <input type="button" id="btn1" value="Table1_1stTD_Children">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td id="a">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
<td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="210px" height="8px" />
</td>
<td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
</tr>
</table>
Table2: <input type="button" id="btn2" value="Table2_1stTD_Children">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td id="b">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />Вот
</td>
<td>
Оно<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="210px" height="8px" />
</td>
<td>
Ка<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />к
</td>
</tr>
</table>
Table3: <input type="button" id="btn3" value="Table3_1stTD_Children"> <input type="button" id="btn31" value="Table3_1stTD_1stDIV_Children">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td id="c">
<div id="d"><img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" /></div>
</td>
<td>
<div><img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" /></div>
</td>
<td>
<div><img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" /></div>
</td>
</tr>
</table>
Table4: <input type="button" id="btn4" value="Table4_1stTD_Children">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="font-size: 0px" id="e">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
<td style="font-size: 0px">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
<td style="font-size: 0px">
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
</tr>
</table>
<script language="javascript">
function showChildren(el) {
ch = el.childNodes;
s = ""
for (i = 0; i < ch.length; i++) {
s += ch.item(i).nodeName + "\n";
}
alert(s);
}
function __attachEvent(el, ev, fun) {
if (window.addEventListener) {
el.addEventListener(ev, fun, false);
} else {
el.attachEvent("on" + ev, fun);
}
}
__attachEvent(document.getElementById("btn1"),"click",function() {showChildren(document.getElementById("a"))});
__attachEvent(document.getElementById("btn2"),"click",function() {showChildren(document.getElementById("b"))});
__attachEvent(document.getElementById("btn3"),"click",function() {showChildren(document.getElementById("c"))});
__attachEvent(document.getElementById("btn31"),"click",function() {showChildren(document.getElementById("d"))});
__attachEvent(document.getElementById("btn4"),"click",function() {showChildren(document.getElementById("e"))});
</script>
</body>
</html>
А, всё, зря я тут ляпнул :) Сам, кстати, недавно такую штуку поборол.
Я тогда решил проблему совсем в лоб. Вместо этого:
Сделал так:
И все.
З.Ы. Эксплорер - придурок.
Код:
<td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
<img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" />
</td>
Сделал так:
Код:
<td><img src="http://pic.ipicture.ru/uploads/090126/gwr2bGXUm9.jpg" width="130px" height="8px" /></td>
И все.
З.Ы. Эксплорер - придурок.