X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> почему таблица в IE рвёт изображение?
mikola_hb
mikola_hb
Topic Starter сообщение 20.1.2011, 12:21; Ответить: mikola_hb
Сообщение #1


доброго здоровья всем!
Проблема вроде и простая, не могу найти решения.
Для примера использования перекатывания, выложил у себя на сайте простенькую табличку, которая как бы предполагалась, будет выглядеть, как единое изображение.
В опере и фаерфоксе так и есть, в IE каждое изображение во второй и последующих строках смещается. причём на разную величину.
За оформление шибко не ругайте, я только осваиваю html
это пробная страница для практики, посетители ее не видят.
http://www.prom-pol.ru/images/zvonok/table_zvonok2.html

Заранее спасибо!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mikola_hb
mikola_hb
Topic Starter сообщение 20.1.2011, 12:30; Ответить: mikola_hb
Сообщение #2


http://validator.w3.org/
нашёл тут у вас полезную проверочную машину, но кроме лишних пробелов и пары ошибок в тексте, ничего не понял )
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ottaviano
ottaviano
сообщение 20.1.2011, 12:40; Ответить: ottaviano
Сообщение #3


mikola, попробуйте в коде таблицы изменить ...
поправляю себя, в коде доктайпа не хватало:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

вместо простого <html>

P.s. и валидатор вам на это тоже намикал )
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mikola_hb
mikola_hb
Topic Starter сообщение 20.1.2011, 13:08; Ответить: mikola_hb
Сообщение #4


Спасибо, поменял у себя пока что на локальном документе.
IE по прежнему рвёт изображение ((
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ottaviano
ottaviano
сообщение 20.1.2011, 13:14; Ответить: ottaviano
Сообщение #5


mikola,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Таблица перекатывания</title>
<style type="text/css">

A.sma {
background: url(zv3.jpg); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 160px; /* Ширина рисунка в пикселах */
height: 194px; /* Высота рисунка */
}
A.sma:hover {
background-position: 0 -194px; /* Смещение фона */
}




div#title {
line-height: 0; /* Изменяем межстрочное расстояние */
}
div#title img {
border: none; /* Убираем рамку вокруг изображения */
}

</style>




</head>

<body background="zv6.jpg" >



<table width=600 >
<tr>
<td>






<br />
</p>тут, внимание, начало: </p><br />


<table border="0" cellpadding="0" cellspacing="0" width=500 id="sorttable">
<caption>Заголовок таблицы</caption>
<tr>
<th colspan=2 > <img src="http://www.prom-pol.ru/images/zvonok/zv1.jpg" width=500 height=160> </th>

</tr>

<tr>
<th width=340>
<img src="http://www.prom-pol.ru/images/zvonok/zv2.jpg" width=340 height=194> </th>
<th width=160>


<a href="http://www.ya.ru" class="sma">


</th>
</tr>



<tr>
<td colspan=3>подвал (банеры, счетчики)</td>
</tr>

</table>



<br />
</p>тут уже сразу и конец! </p><br />




<a href="http://www.tepka.ru/html4b/9.html">тут подробно про таблицы</a>

</p>перед продолжением изучения рекомендую разобраться, про способы присоединения и оформления css + JS </p><br />

<hr>


<div id="title">

<img src="http://www.prom-pol.ru/images/zvonok/zv4.jpg" title="1" width="500" height="300"
alt="Про майфун в основном" /><br />
<img src="http://www.prom-pol.ru/images/zvonok/zv4.jpg" title="2" width="500" height="300" alt="МАЙФУН!!!!"
usemap="#Navigation" /></div>
<p><map id="Navigation" name="Navigation">
<area shape="poly" coords="0,0,0,250,250,250,250,0" href="inform.html" title="Айфона однако!" alt="Айфона однако!" />

<area shape="poly" coords="260,0,260,250,500,250,500,0" href="activity.html" title="Наушника" alt="аушника" />


</map></p>

<p> Задача с координатами решена, посмотрим на рисунок ниже, там всё подробно про координаты многоугольных областей. Про области с атрибутом circle (shape="circle" coords="90,58,3") вы уже сами ищите, а я спать пошёл! три часа ночи же... </p>
<br>
<p>Хотя там всё просто, координаты центра и радиус, да вроде бы, ни к чему это, всё многоугольниаками можно обеспечить</p>
<img src="zv5.jpg" title="8" width="500" height="300"
alt="Картинка, объясняющая, как считаются координаты в MAP" /><br />

</td>

</tr>




</table>
<h3>2010. янв. Smirnoff-leon. попытки овладеть вёрсткой.</h3>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mikola_hb
mikola_hb
Topic Starter сообщение 20.1.2011, 13:48; Ответить: mikola_hb
Сообщение #6


Именно так и сделал (на FTP пока не трогаю, пока причину не найду) в локальном документе сделал именно так.
На всякий случай скопировал весь код, ничего не изменилось, изображение не выглядит целым ((
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ottaviano
ottaviano
сообщение 20.1.2011, 14:02; Ответить: ottaviano
Сообщение #7


mikola, а у вас ИЕ 6 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Таблица перекатывания</title>
<style type="text/css">

A.sma {
background: url(zv3.jpg); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 160px; /* Ширина рисунка в пикселах */
height: 194px; /* Высота рисунка */
}
A.sma:hover {
background-position: 0 -194px; /* Смещение фона */
}
div#title {
line-height: 0; /* Изменяем межстрочное расстояние */
}
div#title img {
border: none; /* Убираем рамку вокруг изображения */
}

</style>
</head>

<body background="zv6.jpg" >
<table width='600'>
<tr>
<td>
<br />
<p>тут, внимание, начало: </p>
<br />
<table border="0" cellpadding="0" cellspacing="0" width="500" id="sorttable">
<caption>Заголовок таблицы</caption>
<tr>
<th colspan='2'>
<img src="http://www.prom-pol.ru/images/zvonok/zv1.jpg" width="500" height="160" alt=""/>
</th>
</tr>
<tr>
<th width="340">
<img src="http://www.prom-pol.ru/images/zvonok/zv2.jpg" width="340" height="194" alt=""/>
</th>
<th width="160">
<a href="http://www.ya.ru" class="sma"></a>
</th>
</tr>
<tr>
<td colspan="2">подвал (банеры, счетчики)</td>
</tr>
</table>
<br />
<p>тут уже сразу и конец! </p>
<br />
<a href="http://www.tepka.ru/html4b/9.html">тут подробно про таблицы</a>
<p>перед продолжением изучения рекомендую разобраться, про способы присоединения и оформления css + JS </p><br />
<hr/>
<div id="title">
<img src="http://www.prom-pol.ru/images/zvonok/zv4.jpg" title="1" width="500" height="300" alt="Про майфун в основном" />
<br />
<img src="http://www.prom-pol.ru/images/zvonok/zv4.jpg" title="2" width="500" height="300" alt="МАЙФУН!!!!" usemap="#Navigation" />
</div>

<p>
<map id="Navigation" name="Navigation">
<area shape="poly" coords="0,0,0,250,250,250,250,0" href="inform.html" title="Айфона однако!" alt="Айфона однако!" />
<area shape="poly" coords="260,0,260,250,500,250,500,0" href="activity.html" title="Наушника" alt="аушника" />
</map>
</p>

<p> Задача с координатами решена, посмотрим на рисунок ниже, там всё подробно про координаты многоугольных областей. Про области с атрибутом circle (shape="circle" coords="90,58,3") вы уже сами ищите, а я спать пошёл! три часа ночи же... </p>
<br/>
<p>Хотя там всё просто, координаты центра и радиус, да вроде бы, ни к чему это, всё многоугольниаками можно обеспечить</p>
<img src="zv5.jpg" title="8" width="500" height="300" alt="Картинка, объясняющая, как считаются координаты в MAP" /><br />

</td>

</tr>




</table>
<h3>2010. янв. Smirnoff-leon. попытки овладеть вёрсткой.</h3>
</body> </html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mikola_hb
mikola_hb
Topic Starter сообщение 20.1.2011, 14:31; Ответить: mikola_hb
Сообщение #8


нет, 7.
но на 6 кажется было то же самое..
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tgarl
tgarl
сообщение 20.1.2011, 15:03; Ответить: tgarl
Сообщение #9


я бы посоветовал в таблице <th> заменить на <td> (у вас там не заголовки прописаны), но это не столь важно.
а по поводу промежутков добавь в стили обнуление отступов в таблице
[CSS]
table tr, table th, table td {margin:0; padding:0;}
[/CSS]
или обнуление отступов на странице
[CSS]
* {margin:0; padding:0;}
[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mikola_hb
mikola_hb
Topic Starter сообщение 20.1.2011, 15:21; Ответить: mikola_hb
Сообщение #10


Мистика какая-то, сначала отступы в таблице убрал, не помогло, потом обнуление, тоже не помогло, все <th> заменил <td> и никаких изменений.
в других браузерах по прежнему всё показывается цельно, без смещений...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПочему нельзя давать рекламу на бренд?
 6 Bilish 1359 12.1.2020, 13:47
автор: BLIK
Открытая тема (нет новых ответов) Почему стоит выбрать именно Berileads?
 2 leadkreditrf 1833 27.11.2019, 12:39
автор: -leadkreditrf-
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПреобразую в вектор растровое изображение
Для первых двух готова делать бесплатно, за отзыв
 1 ropique 3092 18.5.2018, 22:26
автор: Gerga
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПочему слайдер не работает в IE ?
 1 GTAlex 1397 2.11.2016, 11:53
автор: BLIK
Открытая тема (нет новых ответов) Как вывести текст при наведении на изображение?
 2 meduza_hb 7020 18.10.2016, 21:22
автор: -x-line-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 22:20

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet