Слои, кроссбраузерность

[gamletjlo]

Здравствуйте, помогите пожалуйста разобраться. Делаю сайт на joomla1.5(залил на тест-хостинг) - http://alex.z83.ru. Проблемы две (...пока, насчет IE еще не заморачиваюсь):

1. Справа от герба расположен блок <div id='head_photo'> , в него встроен модуль вывода сучайного фото, размеченный как еще один div , внутри которого ссылка с изображением( div->a->img). В стилях я сделал для #head_photo бэкграунд-картинку(corners.png-прозрачную) с белыми уголками, чтобы фото выводились под ней и были со скругленными углами, выставил z-index: 100; а для самой картинки- div#head_photo div a img { display: block;position: relative;z-index: 9;} чтобы она была под картинкой с уголками. Но это не работает, не пойму почему. Можно ли блочно отображать картинку?

2. номер телефона в google chrome и safari "криво" отображается ( по сравнению с Opera и Firefox)

[swetlana]

1 — просто-таки непристойное решение. И ненадёжное.

Получится сделать для нормальных браузеров, но для IE всё равно придётся выворачиваться наизнанку.

А нормальные браузеры умеют и нормальные решения — border-radius.

А если скругления уголков критичны, то и для IE есть на этот счёт костыли типа BB_roundies или PIE.

А номер телефона — из-за перемудрежа с позиционированием.

В одну строчку скорее всего и не решить.

[gamletjlo]

Спасибо за совет, swetlana. Только вы наверное имели ввиду DD_roundies...

[SelenIT]

Лично мне нравится вариант Сергея Чикуёнка — rocon.js. Кроме прочего, помогает и для 9-й Оперы (хотя сейчас она и не так актуальна).

[swetlana]

Спасибо за совет, swetlana. Только вы наверное имели ввиду DD_roundies...

да, конечно. Прошу прощения за очепятку.

Лично мне нравится вариант Сергея Чикуёнка — rocon.js. Кроме прочего, помогает и для 9-й Оперы (хотя сейчас она и не так актуальна).

Спасибо. Как раз сегодня актуально опять мудрить скруглённые углы для IE, надо опробовать.

[Great Rash]

Лично мне нравится вариант Сергея Чикуёнка — rocon.js. Кроме прочего, помогает и для 9-й Оперы (хотя сейчас она и не так актуальна).

ИЕ8 и ИЕ7 на тестовой странице показывает каку. Я я то думаю, чо я в своё время отказался юзать...

[SelenIT]

Странно, у меня всё нормально. Только при зуме появляются артефакты, но не до такой степени. Правда, WinXP. А какой DPI стоит — не 120 часом, может, в этом дело?

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

[Great Rash]

Странно, у меня всё нормально. Только при зуме появляются артефакты, но не до такой степени. Правда, WinXP. А какой DPI стоит — не 120 часом, может, в этом дело?

Сижу на Дристе, зума нет (это видно на скрине). Режим браузера (F12) ИЕ8, стандарты ИЕ8.

[psywalker]

Да нахрена нужны все эти библиотеки. От них одни проблемы. Раньше не было ничего и люди нормально, жили, верстали. Дополнительную обёртку добавил, и вот тебе решение. Всё железно и надёжно.

[SelenIT]

на Дристе, зума нет (это видно на скрине). Режим браузера (F12) ИЕ8, стандарты ИЕ8

Гы, занятненько. Вечером проверю на Win7, плюс попытаюсь опросить знакомых со свистой (если найду). Интересно, отчего может быть?..

У автора был задел на вторую версию, но он, к сожалению, эту затею забросил. Но можно подхватить — 8-ка еще долго будет актуальной...

[SelenIT]

Проверил в IE9/Win7. Странно, ничего не корёжит, но и... не работает . Обычные квадратные углы во всех "стандартных" режимах. Жалко...

[Shift-Web]

Имхо .... PIE хоть и лаганый, но это лучшее решение из всего, что есть ...

[rash]

Имхо .... PIE хоть и лаганый, но это лучшее решение из всего, что есть ...

В каких случаях были сильные тормоза?

Я не так давно его потрогал — на большом количестве элементов относительно медленная инициализация, а потом вроде даже вполне прилично отрисовывается.

[Shift-Web]

>>В каких случаях были сильные тормоза?

Тормозов нет. Единственное условие, чтобы элемент был неподвижен. Если например это всплывающая форма со скруглёнными краями, то при перетаскивании она может пропасть(скакнёт в потолок родителя). Тут видимо баг с пересчётом положения элемента.

Если элемент "стоит на месте", то никаких особых багов нет. Нужно указать position: relative.

>> Я не так давно его потрогал — на большом количестве элементов относительно медленная инициализация, а потом вроде даже вполне прилично отрисовывается.

Жёсткие тормоза замечены на box-shadow. Если взять большой блок и накрыть его тенью, то тормоза просто нереальные. Если всё таки аккуратно и теней немного(по площади) - то вполне прилично.

Возможно имел место конфликт с чем-то дургим. Я заметил баги с cufon, иногда брауз просто вышибает. Кстати у PIE есть вариант через JavaScript. Собираюсь пощупать на днях.

К слову. То, что цепляется через behavior -- это ничто иное как обычный JS, подключаемый как компонент браузера. Можете заглянуть в файл .htc и посмотреть внутренности.

Edited February 17, 2011 by Shift-Web

[gamletjlo]

Насчет скруглений...понятно в какую сторону можно покопать, но пожалуй проще обойтись без них , тем более что не критично. А вот с телефонным номером я так и не разобрался . Похоже, что кривость в IE и Google связана с позиционированием, но как с этим бороться?

[gamletjlo]

Удалось решить проблему, "запихав" в <div id='phone'> табличку, в единственной ячейке которой выводится телефон. Хотя наверное это не самое оптимальное решение, - дивы лишние...

[swetlana]

У вас там больше половины лишнего.

И вот это:

с трудом можно назвать решением проблемы.

[swetlana]

Чем вам не нравится какое-нибудь такое решение?

[rash]

К слову. То, что цепляется через behavior — это ничто иное как обычный JS, подключаемый как компонент браузера. Можете заглянуть в файл .htc и посмотреть внутренности.

Это давно ни для кого не секрет

[gamletjlo]

swetlana, у вас конечно хорошее решение. Только я ведь не с макета верстал, а брал стандартный шаблон joomla и импровизировал. Плюс некоторые элементы нужно выводить модулями, которые сами по себе содержат разметку (надо их еще чистить) ....ну и конечно с опытом у меня неважно обстоит =).

А на сайте старый вариант, не обновил его. Вам плюсик можно как-нибудь поставить? ))

[swetlana]

джумла, конечно, гадость редкостная. Но и в ней можно управлять кодом полностью.

Хотите хорошо — не ленитесь.

Вычищайте всю джумлогадость, пишите максимально простую разметку.

И в css чем проще, тем лучше. Не надо мудрежа с позиционированием там, где им и пахнуть не должно.

[Ping]

Что бы не плодить темы о кросбаузерности напишу тут.

http://www.innovacia.com.ua/test/test.php ... страница проходит валидацию все супер-пупер. Но "уезжает" шапка во всех браузерах кроме Firefox.

http://www.innovacia.com.ua/test/diagnostika.html страница не проходит валидацию и шапка не разъезжается. Во всех браузерах отображается нормально.

Подскажите в чем ошибка верстки ?

[swetlana]

Основная ошибка в использовании абсолютного позиционирования, которое в данном случае не нужно.

и, кстати, фон для формы повторять не нужно

[Ping]

Основная ошибка в использовании абсолютного позиционирования, которое в данном случае не нужно.

и, кстати, фон для формы повторять не нужно

А какое позиционирование лучше использовать ? )

[swetlana]

никакого.

float'ами прибить по сторонам — и достаточно.