Jump to content
  • 0

проблема с border-bottom в браузерах отличных от OPERA


slo_nik
 Share

Question

Доброе время суток.

Сделал свой первый макет сайта, но то что я задумал, нормально работает только в Opera.

В остальных браузерах ни как не могу сделать.

вот адрес по которому можно посмотреть страничку.

Проблема в следующем.

Есть навигация, при наведении курсора на ссылку, под картинкой должна появиться красная линия, но это происходит только в Opera, а в Safari v.3.2.1, Chrome v.3.0.196.0, IE 7/8 линия не видна, в Mozilla v.3.5.1 линия появляется, но ломает вёрстку.

Подскажите, пожалуйста, как решить проблему.

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Потому что при наведении ячейка становиться выше и соответственно за ней все ячейки тоже меняют высоту ровно на 2 пикселя, и всё это дело вместе двигает всю вёртску, поэтому тебе Два совета:

1) Изначально приготовь место для 2 пикселей, а при ниведении заменяй его на Бордеры, например так:

a { display: block; padding-bottom: 2px;}

a:hover{

border-bottom:2px solid #ff0000;

padding-bottom: 0px;

}

2) Делай меню на списках UL, вообще возьми это за правило! :)

Link to comment
Share on other sites

  • 0
Потому что при наведении ячейка становиться выше и соответственно за ней все ячейки тоже меняют высоту ровно на 2 пикселя, и всё это дело вместе двигает всю вёртску, поэтому тебе Два совета:

1) Изначально приготовь место для 2 пикселей, а при ниведении заменяй его на Бордеры, например так:

a { display: block; padding-bottom: 2px;}

a:hover{

border-bottom:2px solid #ff0000;

padding-bottom: 0px;

}

2) Делай меню на списках UL, вообще возьми это за правило! :)

Спасибо за подсказку, помогло.

Чем меню на списках лучше?

Link to comment
Share on other sites

  • 0
Чем меню на списках лучше?

Потому что меню - это список страниц, а список - это UL , тоесть семантически это правильно. Потом меню на списках намного удобнее хотя-бы тем, что у него можно убирать и добавлять пункты, оно эластичнее таблиц и при хорошей вёрстке ты не будешь иметь с UL таких проблем, как у тебя сейчас с таблицей, да и вообще меню на таблицах и таблицы в целом - это вчерашний день!

p.s. - Есть меню, который конечно лучше делать на таблицах, но это не частый случай, с опытом поймёшь, но твоя ситуация явно диктует сделать списком! :)

Link to comment
Share on other sites

  • 0
Потому что меню - это список страниц, а список - это UL , тоесть семантически это правильно.

А любой текст является списком параграфов, а список - это UL, то есть семантически правильно.

Любой набор строк таблицы является списком... любой набор ячеек таблицы является списком, а список - это UL.

Любой набор тегов, что описываю шапку, контент и подвал, не поверите, тоже являются списком (блоков на странице)... и его, по вашей логике, тоже надо делать UL...

:)

Link to comment
Share on other sites

  • 0
А любой текст является списком параграфов, а список - это UL, то есть семантически правильно.

Любой набор строк таблицы является списком... любой набор ячеек таблицы является списком, а список - это UL.

Любой набор тегов, что описываю шапку, контент и подвал, не поверите, тоже являются списком (блоков на странице)... и его, по вашей логике, тоже надо делать UL...

laugh.gif

Ну это уже сильно утрировано, я в принципе имел ввиду, что меню надо делать списком ибо это действительно явный список, а если рассуждать как ты, то тогда много чё вообще можно сделать не по обычному, и не только список :)

Link to comment
Share on other sites

  • 0
Ну это уже сильно утрировано, я в принципе имел ввиду, что меню надо делать списком ибо это действительно явный список, а если рассуждать как ты, то тогда много чё вообще можно сделать не по обычному, и не только список :)

А набор параграфов - это неявный список? Или строки таблицы? Это же явнейший список строк!

Явный список имеет имеет описательную часть. Не бывает в языке конструкций перечислений, которые не требуют описания, что описано в перечислении.

Правильный список.

В нашем офисе работают:

* бухгалтеры

* программисты

* секретарь

Неправильный список.

* бухгалтеры

* программисты

* секретарь

К какой категории относится меню, которое не содержит описательной части?

Link to comment
Share on other sites

  • 0

Для каждых частей страницы есть свои элементы, например для параграфа есть тег <p>, для меню есть UL, а для таблиц есть табличные данные, а если рассуждать как ты, и говорить что если есть описательная часть, значит это список, тогда все части можно делать на списках.

Link to comment
Share on other sites

  • 0
Для каждых частей страницы есть свои элементы, например для параграфа есть тег <p>, для меню есть UL, а для таблиц есть табличные данные, а если рассуждать как ты, и говорить что если есть описательная часть, значит это список, тогда все части можно делать на списках.

Для меню есть тег <menu>, который в HTML 4.01 является deprecated, непонятно почему, но в HTML 5.0 его опять вернули. :)

Link to comment
Share on other sites

  • 0
Для меню есть тег <menu>, который в HTML 4.01 является deprecated, непонятно почему, но в HTML 5.0 его опять вернули. wink.gif

Вот именно, что есть теги, а пользоваться ими нельзя, побольше-бы кстати таких сделали-бы, а то у меня постоянная нехватка помощников в коде, да и элементы частенько приходиться не по назначению лепить из-за этого, а так хотелось-бы, что-бы были теги <header>,<menu> и т. д., надеюсь в скором будущем можно будет пользоваться такими не в чём себе не отказывая :)

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

×
×
  • 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