Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Отобразить менюшку в мозилле также как в ИЕ

Автор: Sardar 25.3.2005, 18:59

Делаю окошко в котором будет прокручиватся меню для нашего FAQ. Пишу в 1stPage2000, т.е. все проверки в ИЕ. Запустив в Мозилле выпадаю в осадок...

Код

<style type="text/css">
/** задан для отлова событий на 3 пиксельном отступе */
#menuwindow {
   float: left;
   background-color: transparent;
   
   position: relative;
   padding: 3px;
}
/** смысл - рамка */
#menuwindow_cont {
  background-color: #eff4f9;
  border: solid 1px black;
}
/** смысл - прокрутка меню в окошке, отступ */
#winmenu_platf {
  position: relative;
  overflow: scroll;
  padding: 2px;
}

.menuwindow_header {
   background-color: #98aff4;
   color: #12092f;
   font-family: Verdana;
   font-size: 10px;
   cursor: move;
   white-space: nobreak;
}
.menuwindow_button {
  border: solid 1px #0a0a50;
  font-family: Verdana;
  font-size: 14px;
  cursor: hand;
  padding: 5px;
}
</style>


<div id='menuwindow'><div id='menuwindow_cont'>
<table cellpadding='0' cellspacing='0' border='0' onselectstart='return false;'>
  <tr class='menuwindow_header' onmousedown='TreeMenuWindow_MouseMoveWindowRegister(event)'>
    <td width='70%'>Навигация</td>
    <td style='white-space: nobreak; text-align: right;'><span
     class='menuwindow_button' onclick='TreeMenuWindow_openOptionList(this);'>Opt.</span><span
     class='menuwindow_button' onclick='TreeMenuWindow_ToggleHiddeWindow(this);'>X</span><span
     class='menuwindow_button' onClick='TreeMenuWindow_ToggleFullSize(this);'>&gt;</span></td>
  </tr>
  <tr>
    <td colspan='2'><div id='winmenu_platf'>
    fsdfsdl;kjsdj lksdjfls ;lksdjf ;lsdkjf s;dlkfj sd;lkfjsd;lfjsdl;kjflsd;k jlks;dj<br>
    sfsdfl;kjsd; f;lksdjf;lksdjflksjdflkjsd;ljsdlkfjsdklfjlskdjflksdjfsd<br>
    fsdfsdfsd<br>
    sdfsd<br>
    fsdfsdfsdl;jfsdljflksdjflk;sjdl;kfjsdfsdsdf<br>
    </div></td>
  </tr>
</table></div></div>

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

Это в ИЕ:
http://files.vingrad.ru/Sardar/IEmenu.gif

Это в Мозилле:
http://files.vingrad.ru/Sardar/Mozmenu.gif
Добавлено @ 19:02
P.S. Ответ нужен побыстрее, вечером хотели мену вводить... smile

Автор: Aliance 25.3.2005, 22:54

Код


.menuwindow_button {
  border: solid 1px #0a0a50;
  font-family: Verdana;
  font-size: 14px;
  cursor: hand;
  padding: 5px;
}

Вот это ( padding: 5px; ) разве не лишнее?
ЗЫ: можно еще попробовать поставить height и width...

Автор: Sardar 25.3.2005, 23:04

Цитата(Aliance @ 25.3.2005, 21:54)

Вот это ( padding: 5px; ) разве не лишнее?

Смысл сией строчки отделить символ в кнопке от бордюра, иначе сливается. А какого Мозилла это вне TR отобразила...?

Автор: Aliance 25.3.2005, 23:39

Попробуй убери это...
Не пмогло:
Значит попробуй поставить margin: 0px;, т.к. это внешний отступ...
По идеи, по рисунки, мне кажется, что текст центрируется по середине tr - а т.к. еще есть боковой отступ - то он не влазит и вылезает, а в IE, видимо, происходит что-то вроде того, если бы мы преминили clip (почему-то?)
Поэкспериментировал бы, но нет в данный момент Мозиллы =( Так что говорю только на вскидку

Автор: dm9 26.3.2005, 03:33

Вот накатал кое-что.
Чувствую себя полным ламером, но чисто сделать получилось smile

Когда меняешь высоту #menu, надо будет менять (ручками, блин) высоту стиля #menucontent .div1. Там это в комментарии указано. В принципе, всё равно вся эта штука на JS работает, так что не смертельно, ИМХО...

Код


<style type="text/css">

* {
    font-family: 'Verdana';
    font-size: 10px;
    color: black;
}

.rightalign {
    text-align: right;
}

#menu {
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 100px;
    top: 70px;
    width: 400px;
    height: 200px;
    z-index: 2;
    border: 1px solid #777777;
}

#menu * {
    margin: 0px;
    padding: 0px;
}

#menu table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

#menuheader {
    height: 20px;
    background-color: orange;
    border: 0px;
    cursor: move;
}

#menuheader td {
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: middle;
}

#menuheader a {
    font-size: 12px;
    text-decoration: none;
    color: black;
}

#menuheader a:hover {
    color: red;
}

#menucontent {
    border: 0px;
    border: 0px solid #777777;
    border-top-width: 1px;
    vertical-align: top;
}

#menucontent .div1 {
    width: 100%;
    height: 179px; /*!!! 200px (#menu's heihgt) - 20px (header) - 1px !!!*/
    background: #EEEEEE;
    overflow: auto;
}

#menucontent .div2 {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    width: auto;
    height: auto;
}

</style>

<div id="menu">
    <table cellspacing="0">
        <tr id="menuheader">
            <td>Навигация</td>
            <td class="rightalign"><a href="#" onclick="return false;">opt</a>&nbsp;&nbsp;<a href="#" onclick="return false;">x</a>&nbsp;&nbsp;<a href="#" onclick="return false;">&gt;</a></td>
        </tr>
        <tr>
            <td colspan="2" id="menucontent">
                <div class="div1">
                    <div class="div2">
                       qwe<br />
                        sdlasdflajsdhfljahsdlkfjahsdlkfhalksdfhlaksdhfalksdfkajsdhflkasdhflkadshfGASDajsdfajshdgfalsdfgqweqw<br />
                        e<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                        qwe<br />
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>


212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />
212312384124581235481723654872635487162534152384512837465182736457236451273<br />

Автор: dm9 26.3.2005, 04:00

Прошу прощения, забыл удалить один ненужный стиль. Сейчас исправил.

Добавлено @ 04:09
Ещё один патчик... исправил.

Автор: Aliance 26.3.2005, 12:13

Цитата(dm9 @ 26.3.2005, 03:33)

* {

Это обозначает, что все элементы наследуют сл. правила. да?

Автор: dm9 26.3.2005, 13:11

Да. Просто шрифт для менюшки задавать глупо. Обычно вся страница имеет один шрифт, а то и размер. Если это чему-то противоречит, можно перенести это объявление в #menu * {}, что означает "все элементы, являющиеся потомками элемента #menu".

Автор: Aliance 26.3.2005, 14:07

Спасибо

полезная вещь

Автор: Sardar 26.3.2005, 14:54

Цитата(Aliance @ 25.3.2005, 22:39)

Попробуй убери это...
Не пмогло:
Значит попробуй поставить margin: 0px;, т.к. это внешний отступ...

С Cheba полечили задав для .menuwindow_button стиль display: table-cell;. Долго спорили зачем это нужно было smile

dm9 большое спасибо! Это то что надо, к вечеру попробую добить скрипты, сейчас кататся на коньках ухожу smile

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

Еще большая просьба сверстать меню так, что бы заголовок был в контенте(position: relativе), а содержимое окошка летало над страницей. Тогда при увеличении окошка он не будет раздвигать статью - это будет один из режимов.
Скорее всего это будут два отдельных слоя без таблиц, тогда лучше если контент(positin: absolute) будет вложен в заголовок окна(position: relative), так что бы с оперой с различными корекциями смещений не парится, а задать left: 0.

Автор: dm9 26.3.2005, 14:59

Цитата(Sardar @ 26.3.2005, 14:54)

Еще большая просьба сверстать меню так, что бы заголовок был в контенте(position: relativе), а содержимое окошка летало над страницей. Тогда при увеличении окошка он не будет раздвигать статью - это будет один из режимов.

Этого не понял smile

Добавлено @ 15:01

Цитата(Sardar @ 26.3.2005, 14:54)

Скорее всего это будут два отдельных слоя без таблиц, тогда лучше если контент(positin: absolute) будет вложен в заголовок окна(position: relative), так что бы с оперой с различными корекциями смещений не парится, а задать left: 0.

Тоже не понял.

Автор: Aliance 26.3.2005, 16:46

Цитата(Sardar @ 26.3.2005, 14:54)

стиль display: table-cell;.

Вот вищишь, я такого даже не знал )))

Автор: Sardar 26.3.2005, 22:27

dm9 окошко это оранжевый заголовок(title, как угодно) и контент. Контент может скрыватся оставляя только заголовок(как в Novell окошки). Теперь представь что заголовок сидит в странице, а не летает поверху. А тело(контент) окошка летает поверх страницы, т.е. может свободно увеличиватся в размерах не сбивая дизайн страницы. Тут проблем нет, я сам сделаю. Если мозилла вдруг заартачится, опять помощи попрошу smile

Автор: dm9 26.3.2005, 23:34

Цитата(Sardar @ 26.3.2005, 22:27)

я сам сделаю. Если мозилла вдруг заартачится, опять помощи попрошу

ОК

Автор: Aliance 29.3.2005, 20:56

Что поделаешь, если Мозилла такая строгая )))