За последние 24 часа нас посетили 17200 программистов и 1534 робота. Сейчас ищут 1754 программиста ...

IE, поубивал бы...

Тема в разделе "HTML и CSS", создана пользователем Danilevsky, 24 фев 2007.

  1. Danilevsky

    Danilevsky Активный пользователь

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Передо мной встала проблема создания css-меню в одной из двух колонок сделанных при помощи div.
    IE(6) ведет себя очень странно, а именно, при наведении курсора на пункт меню (сиреневый) внизу родительского блока появляется пробел...
    Для наглядности можно глянуть сюда: http://www.danilevsky.com/lab/2col/index.html (смотреть в IE(6))

    Вот собственно код этой беды.
    Есть ли у кого соображения по этому поводу?

    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>fucking IE</title>
    6. <style type="text/css">
    7. .container {
    8.     position: relative;
    9.     width: 500px;
    10.     margin: 20px auto 0 auto;
    11.     padding: 5px;
    12.     border: 1px solid #009900;
    13.     overflow: hidden;  
    14. }
    15. .left {
    16.     position: relative;
    17.     width: 200px;
    18.     height: 200px;
    19.     background-color: #CCFF99;
    20.     float: left;
    21. }
    22. .right {
    23.     position: relative;
    24.     width: 295px;
    25.     height: 200px;
    26.     background-color: #336666;
    27.     float: right;
    28. }
    29. a.menu {
    30.     display: block;
    31.     height: 20px;
    32.     background-color: #6666CC;
    33. }
    34. a.menu:hover {
    35.     background-color: #FF3399;
    36. }
    37. </style>
    38. </head>
    39.  
    40. <body>
    41.  <div class="container">
    42.   <div class="left">
    43.    <a class="menu" href="#"></a>
    44.   </div>
    45.   <div class="right"></div>
    46.  </div>
    47. </body>
    48. </html>
     
    #1 Danilevsky, 24 фев 2007
  2. Anonymous

    Anonymous Guest

    Danilevsky, из приведенного кода так и не понял, что тебя смущает...скриншот можно?
     
    #2 Anonymous, 24 фев 2007
  3. Danilevsky

    Danilevsky Активный пользователь

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    #3 Danilevsky, 24 фев 2007
  4. AlexGousev

    AlexGousev Активный пользователь

    С нами с:
    25 мар 2006
    Сообщения:
    1.505
    Симпатии:
    0
    Адрес:
    Москва
    Интересный баг... проявляется только при изменении background-color'а...
     
    #4 AlexGousev, 24 фев 2007
  5. Danilevsky

    Danilevsky Активный пользователь

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    совершенно верно подмечено.
    еще я заметил на это влияет свойство float родительского элемента
     
    #5 Danilevsky, 24 фев 2007
  6. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Untitled</title>
    6. <style type="text/css">
    7. <!--
    8. .container {
    9. width: 500px;
    10. height: 205px;
    11. padding: 5px;
    12. padding-top: 0 !important;
    13. margin: 0 auto;
    14. border: 1px solid #009900;
    15. }
    16. .left {
    17. margin-top: 5px;
    18. width: 200px;
    19. height: 200px;
    20. background-color: #CCFF99;
    21. float: left;
    22. }
    23. .right {
    24. margin-top: 5px;
    25. width: 295px;
    26. float: right;
    27. height: 200px;
    28. background-color: #336666;
    29. }
    30. .right {
    31. position: relative;
    32. width: 295px;
    33. height: 200px;
    34. background-color: #336666;
    35. float: right;
    36. }
    37. a.menu {
    38. display: block;
    39. height: 20px;
    40. background-color: #6666CC;
    41. }
    42. a.menu:hover {
    43. display: block;
    44. background-color: #FF3399;
    45. }
    46. -->
    47. </style>
    48.  
    49. </head>
    50. <body>
    51. <div class="container">
    52. <div class="left"><a href="#" class="menu"></a></div>
    53. <div class="right"></div>
    54. </div>
    55. </body>
    56. </html>
     
    #6 Demon, 24 фев 2007
  7. avm

    avm Активный пользователь

    С нами с:
    21 сен 2006
    Сообщения:
    597
    Симпатии:
    0
    Адрес:
    Москва
    Demon прав. У ".container" ie хочет явный height
     
    #7 avm, 24 фев 2007
  8. Anonymous

    Anonymous Guest

    avm, если быть точным, проблема при расчете padding + height...
     
    #8 Anonymous, 24 фев 2007
  9. AlexGousev

    AlexGousev Активный пользователь

    С нами с:
    25 мар 2006
    Сообщения:
    1.505
    Симпатии:
    0
    Адрес:
    Москва
    Так вот и не понятно: зачем ие делает перерасчет высоты дива при изменении цвета фона? И почему эта высота изменяется.
    Если бы изменялись параметры высоты-ширины, то можно списать на особенности работы ие. А тут налицо именно ошибка.


    PS. Кто-нибудь баг-репорт отправил? :)
     
    #9 AlexGousev, 24 фев 2007
  10. Anonymous

    Anonymous Guest

    AlexGousev, паддинги в IE — давняя больная тема.
    ЗЫ. Надо затестить в IE7 ! ;)
     
    #10 Anonymous, 24 фев 2007
  11. AlexGousev

    AlexGousev Активный пользователь

    С нами с:
    25 мар 2006
    Сообщения:
    1.505
    Симпатии:
    0
    Адрес:
    Москва
    Не знаю... Пользовался ими начиная с версии 5.0 - никаких проблем. Только вот не стоит одновременно с указанием размера их употреблять (т.е. padding-left b/или padding-right вместе с width и padding-top и/или padding-bottom вместе с height).
    Может, потому, что использую табличную верстку? :)
     
    #11 AlexGousev, 24 фев 2007
  12. .50

    .50 Активный пользователь

    С нами с:
    7 июн 2006
    Сообщения:
    136
    Симпатии:
    0
    Адрес:
    СПб
    IE7 как надо.
     
    #12 .50, 25 фев 2007
  13. virabhadra

    virabhadra Активный пользователь

    С нами с:
    11 дек 2006
    Сообщения:
    127
    Симпатии:
    0
    Адрес:
    Praha, Czech Republic
    Может у меня IE6 кривой, но у меня никаких пробелов не появляется.
     
    #13 virabhadra, 2 мар 2007
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)