Jump to content
  • 0

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

gamletjlo

Asked by gamletjlo,

 Share

Question

gamletjlo Explorer

gamletjlo

Posted
Posted

Здравствуйте, помогите пожалуйста разобраться. Делаю сайт на 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)

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0
swetlana Explorer

swetlana

Posted
Posted

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

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

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

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

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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

ie8573237.jpg

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

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

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

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

Link to comment
Share on other sites
  • 0
rash Explorer

rash

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

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

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

Link to comment
Share on other sites
  • 0
Shift-Web Explorer

Shift-Web

Posted
Posted (edited)

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

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

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

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

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

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

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

Edited by Shift-Web
Link to comment
Share on other sites
  • 0
gamletjlo Explorer

gamletjlo

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
gamletjlo Explorer

gamletjlo

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
rash Explorer

rash

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

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

Link to comment
Share on other sites
  • 0
gamletjlo Explorer

gamletjlo

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
Ping Explorer

Ping

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
Ping Explorer

Ping

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept