Модули и меню шаблона в Opera, Firefox и IE

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем loginman, 31.07.2008.

  1. Offline

    loginman Недавно здесь

    Регистрация:
    22.02.2008
    Сообщения:
    14
    Симпатии:
    0
    Здравствуйте. Я создаю шаблон и у меня возникла проблема, боковые модули отображаются в Oper’e и Fifefox’e некорректно они расположены ниже, чем должны быть, а в IE такой проблемы нет, с чем это связано?
    Можно ли сделать, что бы в topmenu кнопки автоматически масштабировались на 100%-ую ширину таблицы?

    Мой css:
    Код (CODE):
    1. /* CSS Document */
    2. td, tr, p, div {
    3.   font-family       : Arial, Helvetica, sans-serif;
    4.   font-size         : 14px;
    5.   color             : #5F5F5F;
    6. }
    7. a:link, a:visited {
    8.   font-size         : 14px;
    9.   color             : #FE7000;
    10.   text-decoration   : none;
    11.   font-weight       : bold;
    12. }
    13. a:hover {
    14.   font-size         : 14px;
    15.   color             : #000000;
    16.   font-weight       : bold;
    17. }
    18. .createdate, .modifydate {
    19.   font-size         : 11px;
    20.   color             : #CC6600;
    21. }
    22. .contentheading {
    23.   font-family       : Arial, Helvetica, sans-serif;
    24.   font-size         : 15px;
    25.   font-weight       : bold;
    26.   text-align        : center;
    27.   color             : #FE7000;
    28. }
    29. .componentheading {
    30.   font-family       : Arial, Helvetica, sans-serif;
    31.   font-size         : 15px;
    32.   font-weight       : bold;
    33.   text-align        : center;
    34.   color             : #FE7000;
    35. }
    36. ul#mainlevel-nav {
    37.   margin            : 0!important;
    38.   padding           : 0px 0px 0px 0px!important;
    39. }
    40. ul#mainlevel-nav li {
    41.   background-image  : url(../images/bn.gif);
    42.   width             : 120px;
    43.   height            : 31px;
    44.   font-family       : Arial, Helvetica, sans-serif;
    45.   float             : left;
    46.   font-size         : 17px;
    47.   color             : #FFFFFF;
    48.   line-height       : 29px;
    49.   overflow          : hidden;
    50. }
    51. ul#mainlevel-nav li a {
    52.   height            : 31px;
    53.   font-family       : Arial, Helvetica, sans-serif;
    54.   font-size         : 17px;
    55.   display           : block;
    56.   color             : #FFFFFF;
    57.   text-align        : center;
    58. }
    59. ul#mainlevel-nav li a:hover {
    60.   background-image  : url(../images/bn_ov.gif);
    61.   width             : 120px !important;
    62.   height            : 31px;
    63.   font-family       : Arial, Helvetica, sans-serif;
    64.   font-size         : 17px;
    65.   color             : #FFFFFF;
    66. }
    67. .sectiontableentry1 {
    68.   padding           : 3px;
    69.   margin            : 3px;
    70.   background        : #F3F3F3;
    71.   border-top        : 1px solid #FFFFFF;
    72.   border-bottom     : 1px solid #DADDD0;
    73.   border-left       : 1px solid #F0F0F0;
    74.   border-right      : 1px solid #F0F0F0;
    75. }
    76. .sectiontableentry2 {
    77.   padding           : 3px;
    78.   margin            : 3px;
    79.   border-top        : 1px solid #FFFFFF;
    80.   border-bottom     : 1px solid #DADDD0;
    81.   border-left       : 1px solid #F0F0F0;
    82.   border-right      : 1px solid #F0F0F0;
    83. }
    84. .contentheading {
    85.   font-family       : Arial, Helvetica, sans-serif;
    86.   font-size         : 16px;
    87.   font-weight       : bold;
    88.   text-align        : center;
    89.   color             : #FE7000;
    90.   padding-top       : 25px;
    91. }
    92. a.mainlevel:link, a.mainlevel:visited {
    93.   display           : block;
    94.   background        : url(../images/buton.gif);
    95.   width             : 148px;
    96.   font-size         : 11px;
    97.   font-weight       : bold;
    98.   color             : #000000;
    99.   text-align        : left;
    100.   line-height       : 25px;
    101.   padding-left      : 8px;
    102.   height            : 25px !important;
    103.   text-decoration   : none;
    104.   margin-left       : 2px;
    105. }
    106. a.mainlevel:hover {
    107.  background-position: 0px -25px;
    108.   text-decoration   : none;
    109.   color             : #fff;
    110.   width             : 148px;
    111. }
    112. .button {
    113.   color             : #000000;
    114.   font-family       : Arial, Hevlvetica, sans-serif;
    115.   text-align        : center;
    116.   font-size         : 11px;
    117.   font-weight       : bold;
    118.   border            : 3px double #cccccc;
    119.   width             : auto;
    120.   background        : url(../images/but.gif) repeat-x;
    121.   padding           : 0px 5px;
    122.   line-height       : 18px !important;
    123.   line-height       : 16px;
    124.   height            : 26px !important;
    125.   height            : 24px;
    126.   margin            : 1px;
    127. }
    128. div.module {
    129.   width             : 200px;
    130.   height            : auto;
    131.   background        : url(../images/middle_block.gif) repeat-y;
    132. }
    133. div.module div {
    134.   background        : url(../images/bottom_block.gif) bottom left no-repeat;
    135. }
    136. div.module div div {
    137.   background        : url(../images/top_block.gif) top left no-repeat;
    138.   padding           : 22px 20px 30px 20px;
    139.   margin-top        : 0px;
    140.   margin            : inherit;
    141. }
    142. div.module div div div {
    143.   background        : none;
    144.   padding           : 0;
    145.   width             : 100%;
    146. }
    147. div.module div div div h3 {
    148.   display           : block;  
    149.   padding           : 0px 0px 10px 0px;  
    150.   margin            : 0;
    151.   font-family       : Arial, Verdana;
    152.   font-size         : 16px;
    153.   font-weight       : bold;
    154.   color             : #FFFFFF;
    155.   text-align        : center;
    156. }

    Скрин
     
    Последнее редактирование модератором: 01.08.2008
  2.  
  3. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Модули и меню шаблона в Opera, Firefox и IE

    Со стилями, которые применены соответствующим селекторам в таблице CSS твоего шаблона - если конкретно, анализируй определения последних пяти наборов селекторов, начиная с "div.module". Присутствуют в них такие стили, которые по-разному интерпретируются Opera, Firefox и IE - соответственно их нужно либо полностью исключить и стилевого файла, либо переопределить так, чтобы они позволяли достигать одинакового результата в каждом из этих браузеров.
    Можно.
     
  4. Offline

    loginman Недавно здесь

    Регистрация:
    22.02.2008
    Сообщения:
    14
    Симпатии:
    0
    Ответ: Модули и меню шаблона в Opera, Firefox и IE

    Можешь показать на примере?
    Молодец, именно это я хотел услышать! [!]
    А если серьезно, как это реализуется в коде?
     

Поделиться этой страницей

Загрузка...