Лента Каталог Файлы Форумы Услуги
ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Оптимизация под все браузеры

 
1 2

6703
Андрей @ZloVeЩиЙ
Решил поднять такую тему, нигде не видел подобной.
Начал верстать новый дизайн (титульный лист) и опять таки наткнулся на актуальную проблему - разные браузеры показывают "хтмл" по разному...
Добился прямого результата (для меня это довольно таки "достижение") Слим, Макстон, ФФ Мозила, Опера... все, все кроме ИЕ7 показывают браузер одинаково, только в ие7 идет смещение всех блоков (дизайн на div-ax)... посоветуйте чего 🙄

1258
Сергей @seg
ZloVeЩиЙ пишет:

Решил поднять такую тему, нигде не видел подобной.
Начал верстать новый дизайн (титульный лист) и опять таки наткнулся на актуальную проблему - разные браузеры показывают "хтмл" по разному...
Добился прямого результата (для меня это довольно таки "достижение") Слим, Макстон, ФФ Мозила, Опера... все, все кроме ИЕ7 показывают браузер одинаково, только в ие7 идет смещение всех блоков (дизайн на div-ax)... посоветуйте чего 🙄

Советовать можно только видя код

6703
Андрей @ZloVeЩиЙ
Опять промахнулся ))
вот код:

<!-- Меню чата -->
<div class="block1">Меню</div>
<div class="block2">
[b]Содержимое[/b]
</div>
<div class="block3"></div>
<!-- /Меню чата -->
А вот класы в файле стилей:
div.block1 {
color: #444444;
font-weight: bold;
font-size: 11px;
border: 1px solid #666666;
width: 180px;
height: 19px;
background: url(../images/bgdiv_1.gif);
text-align: center;
padding-top: 5px;
}
div.block2 {
padding: 5px;
border: 1px solid #666666;
border-top: none;
width: 170px;
}
div.block3 {
background: url(../images/bgdiv_3.gif);
height: 5px;
width: 180px;
border: 1px solid #666666;
border-top: none;
border-bottom: none;
margin-bottom: 6px;
overflow: hidden;
}

1258
Сергей @seg
Проблем совместимости нет.

попробуй так

.block1 {
color: #444444;
font-weight: bold;
font-size: 11px;
border: 1px solid #666666;
width: 180px;
height: 19px;
background: url(../images/bgdiv_1.gif);
text-align: center;
padding-top: 5px;
}
.block2 {
padding: 5px;
border: 1px solid #666666;
border-top: none;
width: 170px;
}
.block3 {
background: url(../images/bgdiv_3.gif);
height: 5px;
width: 180px;
border: 1px solid #666666;
border-top: none;
border-bottom: none;
margin-bottom: 6px;
overflow: hidden;
}

когда див стоит вначале то ксс накладывает еще и стиль который присвоен в другом месте вот так

div{ }

Без картинок по крайней мере ничего не разносит.

Отредактировано seg - 05.03.2009
6703
Андрей @ZloVeЩиЙ
не помогло... попробывал заменить видс на % только всо всех браузерах начили сьежать только 2 блока...

1258
Сергей @seg
Ну меню я проверил все нормально стоит, картинок только нет и остального кода. Возможно там косяки. Заархивируй локальный сайт и брось.

Кстати, зачем ты поставил переполнение скрыть и разные по размеру блоки? может в этом траблы? а если еще картинка не влезает по размеру... Либо картинке еще задай размер соответствующий, либо если она однотонная, то репейтом ее.

Отредактировано seg - 05.03.2009
1258
Сергей @seg
А ну понял точно, переполнение мешает тебе, оно свкрывает то что не помещается (overflow: hidden;). И блоки по размеру отровняй. Я так понимаю там у тебя облако тегов? Он скрипт и должно встать в размер блока без указания переполнения отображать или скрывать. Кинул бы как я просил полностью код с картинками архивом полным точней бы сказал. Возможно в скрипте облака можно задать еще размер

Отредактировано seg - 05.03.2009
1258
Сергей @seg
Проблемы были из-за ошибок в css. Поправлено. Все нормальные браузеры эти ошибки исправляли, а ИЕ тупой. 🤣

6703
Андрей @ZloVeЩиЙ
Согласен, спасибо тебе большое за поправку ))

6703
Андрей @ZloVeЩиЙ
Вот сколько раз уже сталкивался, а спросить не у кого ))
Какая разница, как состоит ХТМЛ код:
</div> <div id="brdmenu" class="inbox">
<div id="brdwelcome" class="inbox">
<ul class="conl">
<li>Вы зашли как <strong>ZloVeЩиЙ</strong> (последний визит: Сегодня 05:55:08)</li>
<li><a href="message_list.php">Личные сообщения </a> | <a href="profile.php?id=2396">Профиль</a> </li>
</ul>
или так:
<div id="brdwelcome" class="inbox">
<ul class="conl">
<li>Вы зашли как <strong>ZloVeЩиЙ</strong> (последний визит: Сегодня 05:55:08)</li>
<li><a href="message_list.php">Личные сообщения </a> | <a href="profile.php?id=2396">Профиль</a> </li>
</ul>
Или это и есть она - валидность!?

1258
Сергей @seg
ZloVeЩиЙ пишет:

Вот сколько раз уже сталкивался, а спросить не у кого ))
Какая разница, как состоит ХТМЛ код:
</div> <div id="brdmenu" class="inbox">
<div id="brdwelcome" class="inbox">
<ul class="conl">
<li>Вы зашли как <strong>ZloVeЩиЙ</strong> (последний визит: Сегодня 05:55:08)</li>
<li><a href="message_list.php">Личные сообщения </a> | <a href="profile.php?id=2396">Профиль</a> </li>
</ul>
или так:
<div id="brdwelcome" class="inbox">
<ul class="conl">
<li>Вы зашли как <strong>ZloVeЩиЙ</strong> (последний визит: Сегодня 05:55:08)</li>
<li><a href="message_list.php">Личные сообщения </a> | <a href="profile.php?id=2396">Профиль</a> </li>
</ul>
Или это и есть она - валидность!?

Что то я тебя не понял. Помему огрызки дивов, без второй половинки? Валидность хтмл, это соответствие спецификации. В спецификации сказано: Див должен закрываться. Какой нить браузер, типа эксплорера прочтет незакрытый див криво, соответственно и расположит его. Допустим с пецификации к докйтап 1,0 надо было закрывать тег мета и имг, а к доктайп 4,1 этого делать не надо, хотя и не страшно, но валидаторы ругаются. пример:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

То же самое и с имгом и т.д.
старое:
<img src="img/image_l.gif" alt="чето" width="310" height="263"></img>
полустарое ))
<img src="img/image_l.gif" alt="чето" width="310" height="263" />
новое
<img src="img/image_l.gif" alt="чето" width="310" height="263">

Эти теги стали самозакрывающимися. Но я так понял, когда браузер не может разобрать какой спецификации следовать (он то ее знает), то опускается к низшей, особенно, если доктайп вверху страницы не указан. Т. е. если с ошибками написать css 3, которая скоро станет рабочей, со всякими скруглениями и другими красивостями, то время твое будет потрачено впустую, если браузер посчитает, что хтмл старый и откажется признавать новшества.
Может не так сказал. Я обьяснять плохо умею. Почитай о доктайп и совместимости в гугле.

Отредактировано seg - 11.03.2009
6703
Андрей @ZloVeЩиЙ
ниасилил... код выдрал с лив-ко, я имею ввиду каким образом влияет, и влияет ли вообще, расположение самого исходного кода!?

1258
Сергей @seg
ZloVeЩиЙ пишет:

ниасилил... код выдрал с лив-ко, я имею ввиду каким образом влияет, и влияет ли вообще, расположение самого исходного кода!?

Выдери нормально и расположи, а не с ошибками. Или ты про табуляцию толкуеш? т.е. расположение именно самого кода в документе. Типа так:
<ul class="conl">
<li>Вы зашли как <strong>ZloVeЩиЙ</strong> (последний визит: Сегодня 05:55:08)</li>
<li><a href="message_list.php">Личные сообщения </a> | <a href="profile.php?id=2396">Профиль</a> </li>
</ul>

<ul class="conl">
<li>Вы зашли как <strong>ZloVeЩиЙ</strong> (последний визит: Сегодня 05:55:08)</li>
<li><a href="message_list.php">Личные сообщения </a> | <a href="profile.php?id=2396">Профиль</a> </li>
</ul>
Тогда никак не влияет, хоть километровые пробелы между тегами ставь, хоть вообще не ставь ( но не внутри тега к атрибутам. Там пробел нужен ессно.)

4875
ValdeZ @ValdeZ
seg пишет:

ZloVeЩиЙ пишет:

Вот сколько раз уже сталкивался, а спросить не у кого ))
Какая разница, как состоит ХТМЛ код:
</div> <div id="brdmenu" class="inbox">
<div id="brdwelcome" class="inbox">
<ul class="conl">
<li>Вы зашли как <strong>ZloVeЩиЙ</strong> (последний визит: Сегодня 05:55:08)</li>
<li><a href="message_list.php">Личные сообщения </a> | <a href="profile.php?id=2396">Профиль</a> </li>
</ul>
или так:
<div id="brdwelcome" class="inbox">
<ul class="conl">
<li>Вы зашли как <strong>ZloVeЩиЙ</strong> (последний визит: Сегодня 05:55:08)</li>
<li><a href="message_list.php">Личные сообщения </a> | <a href="profile.php?id=2396">Профиль</a> </li>
</ul>
Или это и есть она - валидность!?

Что то я тебя не понял. Помему огрызки дивов, без второй половинки? Валидность хтмл, это соответствие спецификации. В спецификации сказано: Див должен закрываться. Какой нить браузер, типа эксплорера прочтет незакрытый див криво, соответственно и расположит его. Допустим с пецификации к докйтап 1,0 надо было закрывать тег мета и имг, а к доктайп 4,1 этого делать не надо, хотя и не страшно, но валидаторы ругаются. пример:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

То же самое и с имгом и т.д.
старое:
<img src="img/image_l.gif" alt="чето" width="310" height="263"></img>
полустарое ))
<img src="img/image_l.gif" alt="чето" width="310" height="263" />
новое
<img src="img/image_l.gif" alt="чето" width="310" height="263">

Эти теги стали самозакрывающимися. Но я так понял, когда браузер не может разобрать какой спецификации следовать (он то ее знает), то опускается к низшей, особенно, если доктайп вверху страницы не указан. Т. е. если с ошибками написать css 3, которая скоро станет рабочей, со всякими скруглениями и другими красивостями, то время твое будет потрачено впустую, если браузер посчитает, что хтмл старый и откажется признавать новшества.
Может не так сказал. Я обьяснять плохо умею. Почитай о доктайп и совместимости в гугле.

ничего оно не меняет, по крайне мере в "полустаром" и в мета тегах...по стандартам xHTML так и должно быть, например, W3C за такое бы по ушам надавал 😁
в вот таких тегах, которые не требуют закрытия добавляется "/",например: <br />, <img ... />, <hr />, <meta ... />
в варианте который был, всё правильно...
документация стоит xHTML 1.0, и для этой документации всё впорядке
так и должно быть
и, насколько я помню, CSS3 функции не имеют значения к доктайпу, могут поменяться физические значения атрибутов, например, размер шрифта, но не более (ИМХО)

Отредактировано ValdeZ - 11.03.2009
1258
Сергей @seg
ValdeZ пишет:

ничего оно не меняет, по крайне мере в "полустаром" и в мета тегах...по стандартам xHTML так и должно быть, например, W3C за такое бы по ушам надавал 😁
в вот таких тегах, которые не требуют закрытия добавляется "/",например: <br />, <img ... />, <hr />, <meta ... />

Ну пройди валидацию, с таким закрытием имга или мета на доктайп 4. Прошу **********

ValdeZ пишет:

в варианте который был, всё правильно...
документация стоит xHTML 1.0, и для этой документации всё впорядке
так и должно быть

А кто спорит? Для каждого времени свои стандарты.


ValdeZ пишет:

и, насколько я помню, CSS3 функции не имеют значения к доктайпу, могут поменяться физические значения атрибутов, например, размер шрифта, но не более (ИМХО)

К доктайпу прямого не имеют, А стили для чего созданы? Для описания, как должна выглядеть страница. Они и в самой странице могут быть прописаны, сам знаешь. А вот доктайп как раз и говорит по какой спецификации этот хтмл и стили читать. И вот если у тебя стоит доктайп 4, а хтмл пишеш по 1 во всей странице, то не жди что все браузеры тебе все красивости отобразят, а то еще и кракозябры просто пойдут. Сплош и рядом такое. Попробуй подставь в стандартный шаблон чата доктайп 4,1. И посмотри во всех браузерах, что с ним станет. Я как то неск. месяцев назад пробовал )

Держи, в самый верх страницы ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


А даже размер шрифта если? Это уже не важно?

Отредактировано seg - 11.03.2009
4875
ValdeZ @ValdeZ
seg пишет:

ValdeZ пишет:

ничего оно не меняет, по крайне мере в "полустаром" и в мета тегах...по стандартам xHTML так и должно быть, например, W3C за такое бы по ушам надавал 😁
в вот таких тегах, которые не требуют закрытия добавляется "/",например: <br />, <img ... />, <hr />, <meta ... />

Ну пройди валидацию, с таким закрытием имга или мета на доктайп 4. Прошу **********

ValdeZ пишет:

в варианте который был, всё правильно...
документация стоит xHTML 1.0, и для этой документации всё впорядке
так и должно быть

А кто спорит? Для каждого времени свои стандарты.


ValdeZ пишет:

и, насколько я помню, CSS3 функции не имеют значения к доктайпу, могут поменяться физические значения атрибутов, например, размер шрифта, но не более (ИМХО)

К доктайпу прямого не имеют, А стили для чего созданы? Для описания, как должна выглядеть страница. Они и в самой странице могут быть прописаны, сам знаешь. А вот доктайп как раз и говорит по какой спецификации этот хтмл и стили читать. И вот если у тебя стоит доктайп 4, а хтмл пишеш по 1 во всей странице, то не жди что все браузеры тебе все красивости отобразят, а то еще и кракозябры просто пойдут. Сплош и рядом такое. Попробуй подставь в стандартный шаблон чата доктайп 4,1. И посмотри во всех браузерах, что с ним станет. Я как то неск. месяцев назад пробовал )

Держи, в самый верх страницы ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


А даже размер шрифта если? Это уже не важно?

валидатор может и не из-за этих тегов так себя вести, особенно, если доктайп xhtml указан
проще вовсе <!doctype html>

1258
Сергей @seg
ValdeZ пишет:

валидатор может и не из-за этих тегов так себя вести, особенно, если доктайп xhtml указан
проще вовсе <!doctype html>

Валидатор конкретно показывает строку и место ошибки. А так же обьясняет ее. Переведи то что он пишет. У меня кста, то же самое дримвьвер пишет, это удобней, но на некоторые ошибки не обращаю внимания, а некоторые нельзя пропускать (пример, стандартный диз титула). Он написан правильно, но давно, соответственно, если ты захочеш в него добавить, а не переписать что то из CSS 3, то ничего не выйдет, пока доктайп не поставиш четверку, но тогда у тебя старый код косячить начнет. Вся страница должна быть сделана по одной спецификации и в нее должен быть вставлен соответствующий ей доктайп. Ты попробовал в стандартный титульник доктайп 4 вставить? Если, как ты говориш не имеет значения как у тебя код написан ( по старому, или по новому), то ничего не произойдет. Попробуй.

6703
Андрей @ZloVeЩиЙ
Что сообственно за ошибка в коде?
Смотрел строку, ничего подозрительно нет!
Ошибка всего одна, но как то подозрительно скакает то в 226 то в 223 строке...

223 </form>
224 </div>
225<div class="block3"></div>
226 <!-- /Поиск анкет -->

Может с тырнетом чего!?

Отредактировано ZloVeЩиЙ - 22.03.2009
1258
Сергей @seg
ZloVeЩиЙ пишет:

Что сообственно за ошибка в коде?
Смотрел строку, ничего подозрительно нет!
Ошибка всего одна, но как то подозрительно скакает то в 226 то в 223 строке...

223 </form>
224 </div>
225<div class="block3"></div>
226 <!-- /Поиск анкет -->

Может с тырнетом чего!?

Ссылку на ресурс то дай.

6600
Александр @admiral
попробуй коментарии вывести как ниже, в фф просто нет ошибки, в ие есть
<!-- Поиск анкет --> - описание до
<!-- /Поиск анкет/ --> - описание после