Проблемы верстки в разных браузерах!

Проблемы верстки в разных браузерах!

Опции

brudanin

Topic Starter сообщение

10.5.2011, 23:26; Ответить: brudanin

Сообщение #1

0

Группа: User
Сообщений: 2
Регистрация: 5.5.2008
Поблагодарили: 0 раз
Репутация:

0

Добрый вечер дорогие друзья, столкнулся с очень "страшной" проблемой.

Сверстал страницу - в Опере, в Хроме, отображаеться нормально, а вот в Фаефоксе и Эксплоере есть некоторые казусы, а именно:

Это правильный вариант (это хром - тут полоски правильно встали):
[IMG]http://img198.imageshack.us/img198/6089/29900269.jpg[/IMG]

Это не правильный вариант в эксплороре:
[IMG]http://img856.imageshack.us/img856/3573/98032890.jpg[/IMG]

а так он съезжает в мозиле:
[IMG]http://img8.imageshack.us/img8/7600/66249137.png[/IMG]

помогите пожалуйста, как это исправить...

вот html

<html>
<head>
<title>вариант 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
$(function(){

// Accordion
$("#accordion").accordion({ header: "h3" });

// Tabs
$('#tabs').tabs();

});
</script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<Center><table id="1" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>
<td rowspan="3" height="1" alt="Белая полоска"></td>
</tr>
<tr>
<td height="1" alt="Белая полоска"></td>
</tr>
<tr>
<td width="244" rowspan="6" height="141" valign="top" alt=""><img src="images/imgg_04.gif" width="244" valign="top" height="141" alt="Логотип"></td>
</tr>

<tr>
<td height="26" bgcolor="#50666c" alt="Белая полоска"></td>
</tr>

<tr>
<td height="5" alt="Белая полоска"></td>
</tr>

<tr>
<td height="26" bgcolor="#974c32" alt="Белая полоска"></td>
</tr>

<tr>
<td height="10" alt="Белая полоска"></td>
</tr>

<td rowspan="2" width="100%" alt="">

<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Бла бЛА БЛА</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignisa, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.m quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor a, dignissim quis.Nam dui erat, auctor </div>
</div>
<div>
<h3><a href="#">Бла бЛА БЛА</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

</td>

<tr>
<td width="100" height="20%" alt="">Партнеры</td>
</tr>

<tr>
<td width="100" height="100%" alt=""></td>
</tr>

<tr>
<td width="100" height="20%" alt="">Все права защищены и бегают с голой жопой по грядкам</td>

</tr>

</table>

</body>
</html>

и если кому-то поможет сss

[CSS]
/* Layout helpersЭТО ТИПО РАССТОЯНИЕ МЕЖДУ ССЫЛКАМИ
----------------------------------*/

.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }

/* Component containers ТУТ КОРОЧЕ ФОН И ВСЕ ТАКОЕ
----------------------------------*/
.ui-widget { font-family: Microsoft Sans Serif; font-size: 1em; }
.ui-widget .ui-widget { font-size: 2em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Microsoft Sans Serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #ffffff; background: #f4f0ec url(images/ui-bg_diagonals-thick_100_f4f0ec_40x40.png) 50% 50% repeat; color: #1e1b1d; }
.ui-widget-content a { color: #1e1b1d; }
.ui-widget-header { border: 1px solid #974c32; background: #974c32 url(images/ui-bg_flat_25_974c32_40x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

/* Interaction states ТУТ КОРОЧЕ ЗАГОЛОВКИ НА ССЫЛКИ И ТДДДД
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cdc3b7; background: #ede4d4 url(images/ui-bg_glass_70_ede4d4_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #3f3731; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #3f3731; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #f5ad66; background: #f5f0e5 url(images/ui-bg_glass_100_f5f0e5_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #a46313; }
.ui-state-hover a, .ui-state-hover a:hover { color: #a46313; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #e0cfc2; background: #f4f0ec url(images/ui-bg_highlight-hard_100_f4f0ec_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #b85700; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #b85700; text-decoration: none; }
.ui-widget :active { outline: none; }

/* IE/Win - Fix animation bug - #4615 РАЗМЕРЫ АККОРДИОНА */
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 0; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }

[/CSS]

Спасайте друзья, спасайте пожалуйста...

0

Ответить с цитированием данного сообщения

Apay Apay 11.5.2011, 0:05; Сообщений: 3462 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	11.5.2011, 0:05; Ответить: Apay Сообщение #2
0 Группа: User Сообщений: 3462 Регистрация: 4.2.2008 Поблагодарили: 0 раз Репутация: 0	приведите html полностью, а то первые строчки отрезанны. новый пост необязательно, можно просто подредактировать первый. из кода непонятно какой доктайп, что в head и пр.

brudanin Topic Starter brudaninTopic Starter 11.5.2011, 0:44; Сообщений: 2 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 11.5.2011, 0:44; Ответить: brudanin Сообщение #3
0 Группа: User Сообщений: 2 Регистрация: 5.5.2008 Поблагодарили: 0 раз Репутация: 0	я переправил. нужны ли скрипты jquery-1.5.1.min.js и jquery-ui-1.8.12.custom.min.js???? могу выложить.

Apay Apay 11.5.2011, 9:18; Сообщений: 3462 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	11.5.2011, 9:18; Ответить: Apay Сообщение #4
0 Группа: User Сообщений: 3462 Регистрация: 4.2.2008 Поблагодарили: 0 раз Репутация: 0	jquery выкладывать не нужно :rolleyes: самое первое - задайте doctype, без него порядка не будет. второе - у вас бардак с ячейками таблицы таблицу нужно переделать.

pomp pomp 11.5.2011, 11:42; Сообщений: 1160 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	11.5.2011, 11:42; Ответить: pomp Сообщение #5
0 Группа: User Сообщений: 1160 Регистрация: 13.12.2007 Поблагодарили: 0 раз Репутация: 0	Какая задача должна быть? Есть картинка порядочная? Возможно предложу нормальный вариант реализации. Оффтоп: название дирректории рассмешило) "зайке2". Следующий вариант верстки предлагаю обозвать "зайке3 - возвращение" :sarcastic:

brudanin Topic Starter brudaninTopic Starter 11.5.2011, 17:31; Сообщений: 2 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 11.5.2011, 17:31; Ответить: brudanin Сообщение #6
0 Группа: User Сообщений: 2 Регистрация: 5.5.2008 Поблагодарили: 0 раз Репутация: 0	а есть какие-нибудь адекватные проги или сайты - где таблицу можно построить автоматом???

samedi samedi 11.5.2011, 19:31; Сообщений: 247 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	11.5.2011, 19:31; Ответить: samedi Сообщение #7
0 Группа: User Сообщений: 247 Регистрация: 23.3.2011 Поблагодарили: 0 раз Репутация: 0	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> в начало самое штмл попробуйте добавить и скажите, не помогло ли?

Clavinessa Clavinessa 11.5.2011, 20:26; Сообщений: 73 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	11.5.2011, 20:26; Ответить: Clavinessa Сообщение #8
0 Группа: User Сообщений: 73 Регистрация: 21.2.2011 Поблагодарили: 0 раз Репутация: 0	Это у вас не проблема верстки в различных браузерах. Это проблема верстки в различных эпохах. Атрибут таблицы и ячейки таблицы height исключен из стандарта HTML в версии 4.01 Поэтому на сегодняшний день его отображение это целиком и полностью задача браузера. Хром и опера видимо питают ностальгические чувства к HTML 3.2

Apay Apay 11.5.2011, 20:31; Сообщений: 3462 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	11.5.2011, 20:31; Ответить: Apay Сообщение #9
0 Группа: User Сообщений: 3462 Регистрация: 4.2.2008 Поблагодарили: 0 раз Репутация: 0	samedi, при такой кривой таблице никакие доктайпы не помогут sashaporka, я для сложных таблиц использую dreamweaver, чтоб не возиться с расчетом где какая ячейка должна быть и пр., но это наверняка умеет делать и любой более-менее приличный визуальный редактор html Clavinessa, кстати я заметил что firefox аттрибута height слушается гораздо лучше чем в opera. и еще, height в html 4.01 для ячейки таблицы присутствует.

samedi samedi 11.5.2011, 23:20; Сообщений: 247 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	11.5.2011, 23:20; Ответить: samedi Сообщение #10
0 Группа: User Сообщений: 247 Регистрация: 23.3.2011 Поблагодарили: 0 раз Репутация: 0	samedi, при такой кривой таблице никакие доктайпы не помогут ага, заметил уже, не обратил внимание сразу на код.. sashaporka, я для сложных таблиц использую dreamweaver, чтоб не возиться с расчетом где какая ячейка должна быть и пр., но это наверняка умеет делать и любой более-менее приличный визуальный редактор html а я вручную пишу всегда, не могу никак привыкнуть к дримьюверу...

« Предыдущая тема · Программная часть · Следующая тема »

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

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Пишет кто отзывы на сайт в янднекс с разных аккаунтах	1	TenDemon_rs	1169	22.3.2024, 13:18 автор: writer80
Youtube: 2 одинаковые аудиокниги на разных языках как такое сделать БЕЗ субтитров???	4	mark2013	1670	7.1.2024, 17:55 автор: mark2013
Размещение ссылок на разных ресурсах для продвижения сайта	6	nikitosmore	2659	18.7.2022, 10:06 автор: A_Diana
Базы сайтов разных тематик для звонков и E-mail рассылок (Россия)	0	maxmer	2055	8.7.2022, 11:05 автор: maxmer
Корректность показа вёрстки изображений на разных гаджетах Не сохраняются пропорции изображений на смартфонах	1	master-vek	37255	25.3.2021, 13:22 автор: tedder