Делаю окошко в котором будет прокручиватся меню для нашего 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>

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

Это в ИЕ:


Это в Мозилле:

Добавлено @ 19:02
P.S. Ответ нужен побыстрее, вечером хотели мену вводить...

Код

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

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

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

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

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

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

Вот накатал кое-что.
Чувствую себя полным ламером, но чисто сделать получилось
Когда меняешь высоту #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:08

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

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

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

* {

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

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


Это сообщение отредактировал(а) dm9 - 26.3.2005, 13:11

Спасибо полезная вещь

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ОК

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