Проблема совместимости при вёрстке

Kavar_Duck · October 7, 2010

Всем привет!

Нужна помощь/консультация!

Возникла проблема с отображением сайта в IE8 и FireFox-e. В опере и сафари - всё работает.

Немного предистории:

Нарисовал сайт в фотошопе, разрезал на куски и получил HTML-код (Photoshop-овский). Отображалось всё нормально во всех броузерах, а потом добавил JavaScript (значки меню меняют цвет) и после этого в IE8 отображение сайта стало некорректным.

сам понимаю, что виной тому какая-то несовместимость скрипта и IE8, но не могу понять какая и как сделать, чтобы во всех броузерах отображалось корректно...

Буду очень признателен, если поможете/подскажете...

Сайт здесь: http://narod.ru/disk/25765214000/SLICED.rar.html

npofopr · October 7, 2010

если вы зарегистрируете бесплатный хостинг и выложите туда страничку, то будет гораздо больше предложений как это исправить.

это что, вернее зачем это в index.html?

<style type="text/css">
@import url("css/styles.css");
</style>

доктайп где?

 colspan="5" rowspan="2"

там вообще сколько таблиц внутри?

./img/images/beer-on.gif

откуда взялся этот путь?

и самое интересное? как вы с помощью фотошопа html нарезали?

Kavar_Duck · October 7, 2010

http://psyganja.narod.ru/

s0rr0w · October 7, 2010

Доктайп где?

Kavar_Duck · October 7, 2010

если вы зарегистрируете бесплатный хостинг и выложите туда страничку, то будет гораздо больше предложений как это исправить.
это что, вернее зачем это в index.html?
<style type="text/css">
@import url("css/styles.css");
</style>
ну это мой первый сайт... поэтому ляпов много, но вообще: это разве не тут указывается?
доктайп где?
вставил
 colspan="5" rowspan="2"
там вообще сколько таблиц внутри?
- может я что-то не так понял, но внутри там нет таблиц (таблиц в таблице)
./img/images/beer-on.gif
откуда взялся этот путь?
- это где такое? даже поиском такую строчку не нашёл в коде...
и самое интересное? как вы с помощью фотошопа html нарезали?

а это просто: может я не совсем правильно выразился, но делал так:

написовал страницу в фотошопе, потом инструментом "раскройка" (нож) нарезал и затем: файл-сохранить для WEB и устройств... и там можно выбрать сохранение с HTML кодом и тогда фотошоп сам формирует код таблицы"

Edited October 7, 2010 by Kavar_Duck

npofopr · October 7, 2010

с картинками может я виноват. это про путь.

стили подключать лучше

<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, projection" />

и в стилях напишите хотя бы

img {border:0;}

А вообще цвета у меня меняются. кружки становятся красными.

Kavar_Duck · October 7, 2010

цвета меняются, Javascript работает, но проблема в том, что всё отображается в "расклееном" виде (между картинками расстояния) которых нет в опере и сафари...

Great Rash · October 7, 2010

Сгенерированный код надо обязательно чистить руками. Без этого нормальное отображение вы не настроите.

Kavar_Duck · October 7, 2010

Сгенерированный код надо обязательно чистить руками. Без этого нормальное отображение вы не настроите.

это наверное правильно, просто я так понимаю, что там принципиально что-то не так, если в опере и сафари отображается нормально, а в ИЕ и Лисе - нет

Причём именно страница до добавления JavaScript-а и в ИЕ и ФОКСЕ тоже отображалась нормально... что говорит о том, что сам табличный код то правильный....

Kavar_Duck · October 8, 2010

Подниму тему... может кто знает как исправить...

psywalker · October 8, 2010

Такой эффект легко делается на КСС. Так что замени скрипт на ксс и всё будет чики-пики.

Kavar_Duck · October 8, 2010

Такой эффект легко делается на КСС. Так что замени скрипт на ксс и всё будет чики-пики.

можешь (в личку) приветси пример как это сделать... что-то я не могу понять как мне это сделать...

Заранее спасибо

psywalker · October 8, 2010

можешь (в личку) приветси пример как это сделать... что-то я не могу понять как мне это сделать...
Заранее спасибо

Да не надо в личку. Это же просто ховер-эффект, так? Ну возьми картинки и заменяй фон у ссылок при наведении.

Kavar_Duck · October 10, 2010

проблема решилась проще чем я думал...

надо было в CSS прописать:

img {

border:none

}

НО, перед тем как дошёл до этого, решил не усложнять страницу JavaScript-ом и сделать меню Hover-ом (по совету psywalker-а) и тут столкнулся с новой проблемой...

вроде делаю всё "по-инструкции", но в итоге картинка с кнопкой на нужное место не встаёт и получается как бы дыра в странице, через которую виден только background...

пример по ссылке: http://psyganja.narod.ru/index.html - первая иконка

HTML-код

<html>
<head>
<title>index-sliced-under cunstruction</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<center>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index-sliced-under cunstruction.psd) -->
<table id="________01" width="801" height="1041" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="9">
			<img src="images/img_01.gif" width="70" height="1040" alt=""></td>
		<td colspan="4" rowspan="4"><a href="index.html">
			<img src="images/img_02.gif" width="171" height="208" alt="Главная"></a></td>
		<td colspan="5" rowspan="2"><a href="fish.html">
			<img src="images/img_03.gif" width="365" height="72" alt="Рыба"></a></td>
		<td colspan="2">
			<img src="images/img_04.gif" width="126" height="28" alt=""></td>
		<td rowspan="9">
			<img src="images/img_05.gif" width="68" height="1040" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2"><a href="adress.html">
			<img src="images/adress.gif" width="126" height="63" alt="Как нас найти"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="44" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2"><a href="index.html">
			<img src="images/img_07.gif" width="365" height="136" alt="Бирлога - сеть магазинов разливного пива"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="19" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/img_08.gif" width="126" height="117" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="117" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/img_09.gif" width="45" height="129" alt=""></td>
		<td>
			<a href="news.html" class="r-news"></a></td>
		<td colspan="3">
			<img src="images/img_11.gif" width="91" height="129" alt=""></td>
		<td>
			<img src="images/img_12.gif" width="94" height="129" alt=""></td>
		<td>
			<img src="images/img_13.gif" width="102" height="129" alt=""></td>
		<td>
			<img src="images/img_14.gif" width="99" height="129" alt=""></td>
		<td colspan="2">
			<img src="images/img_15.gif" width="96" height="129" alt=""></td>
		<td>
			<img src="images/img_16.gif" width="45" height="129" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="129" alt=""></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="images/img_17.gif" width="662" height="586" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="586" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/img_18.gif" width="141" height="41" alt=""></td>
		<td colspan="6">
			<img src="images/img_19.gif" width="395" height="41" alt=""></td>
		<td colspan="2">
			<img src="images/img_20.gif" width="126" height="41" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="41" alt=""></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="images/img_21.gif" width="662" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="images/img_22.gif" width="662" height="54" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="54" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="70" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="45" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="90" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="30" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="55" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="94" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="102" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="99" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="81" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="45" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="68" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>

CSS-код

@charset "utf-8";
/* CSS Document */
a.r-news {
	background: url(images/news.gif); /* Путь к файлу с исходным рисунком  */
	display: block; /* Рисунок как блочный элемент */
	width: 90px; /* Ширина рисунка */
	height: 129px; /* Высота рисунка */
   }
   a.r-news:hover {
	background: url(images/news-on.gif); /* Путь к файлу с заменяемым рисунком  */
   }
body {
	margin-bottom: 0px;
	background-color: #301210;
	}
img {
	border:none
}

psywalker · October 10, 2010

Отлично, сразу бы так

Kavar_Duck · October 10, 2010

Отлично, сразу бы так

Подскажешь со второй частью сообщения?))):

"...столкнулся с новой проблемой...

вроде делаю всё "по-инструкции", но в итоге картинка с кнопкой на нужное место не встаёт и получается как бы дыра в странице, через которую виден только background...

пример по ссылке: http://psyganja.narod.ru/index.html - первая иконка..."

Edited October 10, 2010 by Kavar_Duck

sigma77 · October 10, 2010

Подскажешь со второй частью сообщения?))):
"...столкнулся с новой проблемой...
вроде делаю всё "по-инструкции", но в итоге картинка с кнопкой на нужное место не встаёт и получается как бы дыра в странице, через которую виден только background...

Судя по всему неправильно указываешь путь к картинке. Путь должен быть указан относительно файла со стилями, т.е. скорее всего ../images/news.gif

Kavar_Duck · October 10, 2010

Судя по всему неправильно указываешь путь к картинке. Путь должен быть указан относительно файла со стилями, т.е. скорее всего ../images/news.gif

СПАСИБО !!! Работает!

Sign In

Проблема совместимости при вёрстке

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information