Здравствуйте, гость ( Вход | Регистрация )

 
 Ответить в данную темуНачать новую тему
> CSS, HTML - кроссбраузерность, помогите, я сейчас отрублю себе пальцы....
Tesh
сообщение 21.10.2008 - 01:13

Продвинутый новичок
**

Группа: Участник
Сообщений: 42
Регистрация: 10.09.2005
Пользователь №: 9679
Доброй ночи... 2 дня сидел писал аккуратненько, верстал шаблон через CSS и таблицы...
В итоге вот что получилось справа опера 9.6, слева ИЕ 7... И код с странички и CSS... в FireFox тоже самое что и в опере, подскажите где я наступаю на граблю по сотне раз?


CSS
CODE
body { color: #FFFFFF; background: #000000; margin: 0 }

img { border: 0 }

table { border-collapse: collapse; border: 0 }

table td { padding: 0px }

td img { display: block }

td a img { display: block }



a:link { color: #B167B1 }

a:hover { color: #FFFFFF }

a:active { color: #FFFFFF }

a:visited { color: #B167B1 }



.header { text-align: center; height: 160px }

.header td { vertical-align: top }

.navigation { padding-top: 10px }

.menu { height: 100%; text-align: center; }



.content { text-align: center; vertical-align: top; width: 600px; padding-left: 10px; padding-right: 5px }

.width { width: 1200px; height: 100% }

.empty { width: 320px }

.opera { width: 70%; color: #000000; background-image: none }



.1 { width: 280px; text-align: center; height: 920px; background: url('menu.jpg'); background-repeat: no-repeat; background-position: right top }

.2 { width: 920px; background: url("main.jpg"); background-repeat: no-repeat; background-position: right top }

.3 { width: 280px }

.4 { width: 920px }

.100 { height: 100%; width: 100%; }







.footer1 { height: 100%; background: url("footer1.jpg"); background-repeat: no-repeat; background-position: right bottom }

.footer2 { height: 50px; vertical-align: bottom; background: url("footer2.jpg"); background-repeat: no-repeat; background-position: right bottom }

.allion { height: 50px; vertical-align: bottom; background: url("allion.jpg"); background-repeat: no-repeat; background-position: left bottom }



HTML
[codebox]
Цитата
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset={$smarty.const.DEFAULT_CHARSET}"/>
<meta name="generator" content="Adobe GoLive"/>
{$page_meta_tags}
<title>{$page_title|default:$smarty.const.CONF_DEFAULT_TITLE}</title>
<base href="http://www.4fashion.ru/shop/"/>
<link href='images/small.css' type=text/css rel=stylesheet>
<script language=JavaScript>
<!--{literal}
if (screen.width <= 1280)
{ document.write ("<link href='http://www.4fashion.ru/shop/images/small.css' type=text/css rel=stylesheet>") };
if (screen.width >= 1281)
{ document.write ("<link href='images/big.css' type=text/css rel=stylesheet>") };
//-->
</script>
<script language="javascript">
<!--
function open_window(link,w,h) // открывает окно
{
var win = "width="+w+",height="+h+",menubar=no,location=no,resizable=yes,scrollbars=yes";
newWin = window.open(link,'newWin',win);
newWin.focus();
}
function open_printable_version(link) // открывает новое окно
{
var win = "menubar=no,location=no,resizable=yes,scrollbars=yes";
newWin = window.open(link,'perintableWin',win);
newWin.focus();
}
function confirmDelete(id, ask, url) // подтверждение удаления заказа
{
temp = window.confirm(ask);
if (temp) //delete
{
window.location=url+id;
}
}
function confirmUnsubscribe() // подтверждение отписки от новостей
{
temp = window.confirm('{/literal}{$smarty.const.QUESTION_UNSUBSCRIBE}{literal}');
if (temp) //delete
{
window.location="index.php?killuser=yes";
}
}
function validate() // проверка формы подписки на новости
{
if (document.subscription_form.email.value.length<1)
{
alert("{/literal}{$smarty.const.ERROR_INPUT_EMAIL}{literal}");
return false;
}
if (document.subscription_form.email.value == 'Email')
{
alert("{/literal}{$smarty.const.ERROR_INPUT_EMAIL}{literal}");
return false;
}
return true;
}
function validate_disc() // проверка формы отправки
{
if (document.formD.nick.value.length<1)
{
alert("{/literal}{$smarty.const.ERROR_INPUT_NICKNAME}{literal}");
return false;
}
if (document.formD.topic.value.length<1)
{
alert("{/literal}{$smarty.const.ERROR_INPUT_MESSAGE_SUBJECT}{literal}");
return false;
}
return true;
}
function validate_search() // проверка формы ввода для поиска
{
if (document.Sform.price1.value!="" && ((document.Sform.price1.value < 0) || isNaN(document.Sform.price1.value)))
{
alert("{/literal}{$smarty.const.ERROR_INPUT_PRICE}{literal}");
return false;
}
if (document.Sform.price2.value!="" && ((document.Sform.price2.value < 0) || isNaN(document.Sform.price2.value)))
{
alert("{/literal}{$smarty.const.ERROR_INPUT_PRICE}{literal}");
return false;
}
return true;
}
{/literal} -->
</script>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<table class="100" align="center">
<tr valign="top">
<td width="100%" align="right">
<table class="width">
<tr valign="top">
<td>
<table class="width">
<tr valign="top">
<td>
<table class="100">
<tr class="100">
<td class="1"> <!-- MENU COLUMN -->
<table class="100">
<tr class="100">
<td class="header"> <!-- LOGO -->
</td>
</tr>
<tr valign="top">
<td class="menu"> <!-- MENU -->
MENU
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="2">
<table class="100">
<tr class="footer1">
<td class="100"> <!-- MAIN COLUMN -->
<table class="100">
<tr class="header">
<td class="navigation">
NAVIGATION MENU
</td>
<td class="empty">
</td>
</tr>
<tr valign="top">
<td class="content">

{include file="$main_content_template"}

</td>
<td class="empty">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="width">
<tr valign="top">
<td class="3">
<table class="100">
<tr class="allion">
<td class="100">
</td>
</tr>
</table>
</td>
<td class="4">
<table class="100">
<tr class="footer2" height="50">
<td class="100" align="right">
<a href="http://www.webswitch.ru/"><img src="images/footer2.jpg" alt="Content, Design and Development - WebSwitch Studio"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>


</td>
</tr>
</table>
</body>
</html>

</div>

Посмотреть можно на www.4fashion.ru/shop, правда из за этого акадо - DNS не совсем корректно работают, поэтому тока через прокси можно зайти, либо прописав в hosts:

94.75.198.242 4fashion.ru
94.75.198.242 www.4fashion.ru

Сообщение отредактировано Tesh - 21.10.2008 - 01:24
Прикрепленные файлы
Прикрепленный файл  4fashion.jpg ( 134.92 килобайт ) Кол-во скачиваний: 1
 
Перейти в начало страницы
 
+Цитировать сообщение
Junky7
сообщение 21.10.2008 - 08:06

<nobr>
******
орден I степениорден III степени
Группа: Участник
Сообщений: 1332
Регистрация: 28.05.2004
Пользователь №: 3700
Какая еще кроссбраузерность, когда у вас даже DOCTYPE не прописан.
Почитайте хотя бы тут: ]]>http://webmascon.com/topics/coding/25a.asp]]>

У вас уже в CSS у body стоит margin:0, так нафига потом в HTML у body еще раз вписывать topmargin и т.д.

А вообще, читайте спецификации:

В CSS2 идентификаторы (включая имена элементов, классы и ID в селекторах) могут содержать только символы [A-Za-z0-9] и символы ISO 10646 от 161 и выше и дефис (-); они не могут начинаться с дефиса или цифры. Они могут также содержать escape-последовательности и любые символы и цифровые коды ISO 10646 (см. далее). Например, идентификатор "B&W?" можно записать как "B\&W\?" или "B\26 W\3F".

Сообщение отредактировано Junky7 - 21.10.2008 - 08:07
Перейти в начало страницы
 
+Цитировать сообщение
Bolt Thrower
сообщение 21.10.2008 - 10:34

Частый гость
***

Группа: Участник
Сообщений: 233
Регистрация: 4.01.2006
Пользователь №: 11329
забавно smile.gif ыксплорер всё схавает smile.gif
потрать те же два дня на прочтение спецификации по хтмл и ксс и не будешь на грабли наступать
и привыкай сразу верстать по человечески, забудь про таблицы в таком их применении, потом задолбаешься переучиваться, и не нужно никаких аттрибутов типа алигн или видз в хтмле, всё это в ксс должно быть
то же самое и яваскрипта касается, не используй документ.врите и подобных методов, делай через ДОМ
Перейти в начало страницы
 
+Цитировать сообщение
Tesh
сообщение 21.10.2008 - 13:27

Продвинутый новичок
**

Группа: Участник
Сообщений: 42
Регистрация: 10.09.2005
Пользователь №: 9679
Ну да с DOCTYPE я просёк, что с ним чего то не так, но у меня ща мозг уже взорван, объясните плиз несколько вопросов:
1) сам этот DOCTYPE указывает на правила, по которым идёт обработка страницы? типа как общепринятый формат для всех браузеров
2) я вроде писал всё в css всё таким образом, что все свойства поддерживаются - ]]>http://www.opera.com/docs/specs/css/]]>
3) Только почему то не применяются через CSS там к ячейкам и т.п. свойства ширины и высоты, если вынести кусок кода из самого файла small.css, тоесть вызывать не через class="x", а просто вставить этот как style="xxxxxx", то ширина работает и высота...
4) Что с таблицами не так использовал, как можно разумнее сделать? типа что у меня таблиц не мерянно? Но к сожалению через слои я чего то не могу осилить... Да и дизайн у меня должен быть гибким... Атрибуты в html - признаю, просто потом уже крыша ехать начала и я стал их туда писать...

И не пойму как DOCTYPE влияет на саму обработку - HTML он же и есть HTML, вроде как, понимаю что есть там ньюансы по выравниванию может, может и по растягиванию, но чего не могу найти, где можно почитать это... вроде как тут - но в плотную не могу найти, чтобы была написано... ]]>http://www.w3.org/]]>

Junky7, я вставил margin - от бесыходнысти в html и забыл стереть.. это я вставлял там, с какого то сайта прочёл, что нужно типа для всех браузеров так прописать)))

Всё, вроде разобрался - нашёл для себя чуда ссылку ]]>http://jigsaw.w3.org/css-validator/validat...g=1&lang=en]]>

Понял ошибку про CSS и классы начинающиеся с цифр)

Блин... а теперь ещё менее глобальный вопрос:
]]>http://4fashion.ru/shop/]]> через hideme.ru
1) в IE показывает всё как нужно
2) в Opera нижний элемент footer1 не выравнивается по нижнему краю через css, а почему то располагается вверху! В левой колонке текст MENU по середине, хотя я его valign'ом вверх прижал
3) в FireFox всё отлично, только текст MENU, почему то вообще вниз выравниватся!

Сообщение отредактировано Tesh - 21.10.2008 - 13:28
Перейти в начало страницы
 
+Цитировать сообщение
Junky7
сообщение 21.10.2008 - 13:38

<nobr>
******
орден I степениорден III степени
Группа: Участник
Сообщений: 1332
Регистрация: 28.05.2004
Пользователь №: 3700
Да пропишите же DOCTYPE наконец-то, а то все правки напоминают пляски с бубном.
После этого хотя бы какая-то осмысленность в коде появится.

Да и разобраться с таким кодом (ячеек просто немеряно) сложновато сходу.

Можно же проще писать, пусть даже хотя бы так (в качестве скелета):

Код
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
<td height="229">top</td>
</tr>
<tr valign=top><td height="100%">center</td></tr>
<tr><td height="50">footer</td></tr></table>


И в DOCTYPE HTML 4.01 прописать

З.Ы. тапками не кидаться, я вообще на таблицах не верстаю. =)

Сообщение отредактировано Junky7 - 21.10.2008 - 13:46
Перейти в начало страницы
 
+Цитировать сообщение
Tesh
сообщение 21.10.2008 - 13:57

Продвинутый новичок
**

Группа: Участник
Сообщений: 42
Регистрация: 10.09.2005
Пользователь №: 9679
такой сойдёт?)
Цитата
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

ну я там помечал ячейки, сейчас просто стёр пометки...
Со скелетом понял кажись ошибку тоже)

После прописания этого кода - в IE нижний блок тоже почему то поднялся - а в FireFox всё отлично стало
Перейти в начало страницы
 
+Цитировать сообщение
Junky7
сообщение 21.10.2008 - 14:13

<nobr>
******
орден I степениорден III степени
Группа: Участник
Сообщений: 1332
Регистрация: 28.05.2004
Пользователь №: 3700
А зачем вы в .footer1 написали height:100% ?
Да и вообще как-то странно видеть фон, прописанный к tr

Я бы предложил все переверстать как-нибудь попроще.
Перейти в начало страницы
 
+Цитировать сообщение
Tesh
сообщение 21.10.2008 - 14:21

Продвинутый новичок
**

Группа: Участник
Сообщений: 42
Регистрация: 10.09.2005
Пользователь №: 9679
ладно, спасибо большое, что голову мне промыли!
сейчас постараюсь оптимизировать страничку и снова спрошу, если опять будут косяки эти...

с footer1 накосячил, там вообще сейчас по другому сделаю, а почему фон к tr не привычно?
Перейти в начало страницы
 
+Цитировать сообщение
Junky7
сообщение 21.10.2008 - 14:32

<nobr>
******
орден I степениорден III степени
Группа: Участник
Сообщений: 1332
Регистрация: 28.05.2004
Пользователь №: 3700
Ну мне как-то не доводилось использовать фон у tr, да и видеть в коде у кого-либо тоже, просто немного удивился.
Перейти в начало страницы
 
+Цитировать сообщение
Tesh
сообщение 21.10.2008 - 19:34

Продвинутый новичок
**

Группа: Участник
Сообщений: 42
Регистрация: 10.09.2005
Пользователь №: 9679
Упрощаю код до максимума, столкнулся с проблемой, почему не могу сделать таблицы высотой 100 процентов?
Тоесть этой таблицы - есть текст, она растягивается только до высоты текста. 100 высоты не работает, при этом по ширине - всё порядок, пропускал мой код через это ]]>http://validator.w3.org/]]> и это ]]>http://jigsaw.w3.org/css-validator/]]>
пишет что у меня всё супер. Подскажите где рыть хотя бы... Как при таком DOCTYPE делать таблицы по высоте в 100%?

HTML
Цитата
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "]]>http://www.w3.org/TR/html4/strict.dtd]]>">
<html>
<head>
<title>NEW</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<link href="images/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<table class="bone">
<tr class="max">
<td class="navy">
Why this table is not a 100% height??? WTF?
<br>
Just showing this for a height of text, printed in this cell...
<br>
Maybe I shouldn't use a value height 100?
<br>
What it may be?
</td>
</tr>
</table>
</body>
</html>


CSS
Цитата
body { color: red; margin: 0; text-align: right }
table { border-width: 0; border-color: red; border-style: solid; border-collapse: collapse }
td { color: white; font-decoration: bolder }
img { border: 0 }

a:link { color: #B167B1 }
a:hover { color: #FFFFFF }
a:active { color: #FFFFFF }
a:visited { color: #B167B1 }

.bone { height: 100%; width: 1200px; background: url(main.jpg); background-repeat: no-repeat; background-position: top right }
.bone tr { height: 100%; }

.max { height: 100%; }
.max tr { width: 100%; }

.navy { background: url(menu.jpg); background-repeat: no-repeat; background-position: left top }




Нашёл ошибку, я идиот, забыл вот это: body { height: 100%; ...

ОГРОМНОЕ ВСЕМ СПАСИБО!!!!
Я познал основные премудрости кроссбраузерности и этого DOCTYPE, тему можно закрывать!
Отдельное спасибо Junky7, я существенно сократил число таблиц в документе!
Теперь у меня в шаблоне их всего 2 !!!
А если бы кто кинул интересные ссылки по верстке слоями, (вроде других больше методов не бывает), то я бы ещё раз вас поблагодарил!! :-)

Сообщение отредактировано Tesh - 21.10.2008 - 18:32
Перейти в начало страницы
 
+Цитировать сообщение
Junky7
сообщение 21.10.2008 - 22:50

<nobr>
******
орден I степениорден III степени
Группа: Участник
Сообщений: 1332
Регистрация: 28.05.2004
Пользователь №: 3700
]]>http://ru.wikipedia.org/wiki/Css]]>
там в ссылках много полезного

]]>http://webmascon.com]]>
тут еще

]]>http://alistapart.com]]> =)
Перейти в начало страницы
 
+Цитировать сообщение
avtor
сообщение 4.11.2008 - 18:47

Постоялец форума
*****

Группа: Участник
Сообщений: 978
Регистрация: 15.04.2004
Пользователь №: 3224
Цитата(Tesh @ 21.10.2008 - 19:34) *
А если бы кто кинул интересные ссылки по верстке слоями, (вроде других больше методов не бывает), то я бы ещё раз вас поблагодарил!! :-)


Вот пример кривой верстки слоями - ]]>http://www.rbbw.ru/]]> - который говорит о том, что при использовании этого метода надо быть очень аккуратным.
Не раз видел сайты, в которых слои перкрывают друг друга, делая недоступным часть меню или часть контента.
Так что внимательность и еще раз внимательность!
Перейти в начало страницы
 
+Цитировать сообщение
SHADE
сообщение 6.11.2008 - 02:49

Bill rulz ^^
******
орден IV степени
Группа: Участник
Сообщений: 1418
Регистрация: 28.09.2003
Пользователь №: 24
наверно тогда это тоже будет в тему ]]>http://www.csszengarden.com/]]> самый главный сайт smile.gif

справа можно выбирать темы (скины) для показа, хтмл сайта всегда одинаковый.
Перейти в начало страницы
 
+Цитировать сообщение
avtor
сообщение 2.12.2008 - 21:34

Постоялец форума
*****

Группа: Участник
Сообщений: 978
Регистрация: 15.04.2004
Пользователь №: 3224
Оказывается, при верстке слоями ошибаются даже в Яндексе.



Сообщение отредактировано avtor - 2.12.2008 - 21:35
Перейти в начало страницы
 
+Цитировать сообщение
avtor
сообщение 3.12.2008 - 14:22

Постоялец форума
*****

Группа: Участник
Сообщений: 978
Регистрация: 15.04.2004
Пользователь №: 3224
А вот еще пример кривой верстки слоями на сайте "Детского радио".

Перейти в начало страницы
 
+Цитировать сообщение
« Предыдущая тема · WEB Программирование · Следующая тема »
 

Ответить в данную темуНачать новую тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 

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

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

RSS Текстовая версия Сейчас: 27.04.2024 - 06:08
Русская версия IP.Board 2.3.1 © 2024  IPS, Inc.