Проблема с кроссбраузерностью

[gregsv]

Всем добрый день.

Верстал страницу по шаблону взятому здесь http://forum.htmlbook.ru/index.php?showtopic=16763

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

Firefix - Кнопка возле заголовка при навелении не активна, т.е. не срабатывает тег <a>

Chrome - Вокруг поля для поиска отображается светлая рамка. Outline:none проставлен. Как убрать не ее не понял.

Safari - не срабатывает background у того же поля поиска

IE - градиент вообще не отражается, хотя в коде вроде все стоит нормально

Сайт залил на хостинг http://uta.p.ht/

Как справиться с этими недочетами?

Заодно может кто опытный подскажет, правильно ли использовал теги aside, section и article, если по семантике?

И как семантически правильней создавать список ссылок в последнем блоке, через список или как у меня строчками?

[red4pony]

Попробуйте задать правила CSS не через селектор атрибута, а с помощью класса. Уберите <button>

[klierik]

Firefix - Кнопка возле заголовка при навелении не активна, т.е. не срабатывает тег

.company > div {
position: relative;
z-index: 3;
}

Chrome - Вокруг поля для поиска отображается светлая рамка. Outline:none проставлен. Как убрать не ее не понял.

у меня не отображается.

Safari - не срабатывает background у того же поля поиска

input[type="search"] {
-webkit-appearance: textfield;
}

[gregsv]

Попробуйте задать правила CSS не через селектор атрибута, а с помощью класса. Уберите

т.е. для button задать класс? Или оформление повесить на div? Вроде по симантике кнопка и должна быть...

у меня не отображается.

Попробую потом проверить на другом компе

А по поводу IE есть какие-нибудь идеи?

.company > div {position: relative;z-index: 3;}

Попробовал, не срабатывает. Плюс появляется при нажатии пунктирная рамка div-а. outline от нее не избавляет

Edited May 29, 2013 by gregsv

[klierik]

А по поводу IE есть какие-нибудь идеи?

у меня IE на виртуалке и запускать в данный момент неохота -- жрет ресурсы сильно.

но вариант посмотреть на:

http://www.colorzilla.com/gradient-editor/

попробовать создать градиент через этот генератор.

[red4pony]

т.е. для button задать класс?

Просто в ссылку вложить изображение.

[gregsv]

хорошо, попробую. Странно только что огнелис так отличился...

Edited May 29, 2013 by gregsv

[klierik]

Странно только что огнелис так отличился...

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

[gregsv]

Справился))

В Firefox проблему с кнопкой решил по совету red4pony. Вложил все в div. игеещт пришлось убрать. Хотя насколько это соответствует семантике не знаю..

.company > div {position: relative;z-index: 3;}

Этот подход, к сожалению не сработал.

Неправильное отображение в Crome и Safari удалось поправить введя для input[type=search] правило -webkit-appearance: none (может кому поможет )

В IE у меня было отключино выполнение сценариев и из-за этого градиент не отображался. На всякий случай добавил однотонный фон, чтобы в любом случае пользователь мог просмотреть сайт, хоть и с меньшими красивостями.

Жаль только что валидатор ругается на свойства linear-gradient.

Всем огромное спасибо! Тему можно закрывать))