Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Растягивается div по высоте в IE, В FF нормально, а в IE растягивается 
:(
    Опции темы
Enya
  Дата 8.2.2007, 12:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет
Вот весь css фаил:
Код


body{
    background-image: url(/images/background.jpg);
    background-repeat: repeat-x;
    margin-top: 0;
    margin-left: 0;
}

body,p,table,tr,td,div
{
    font-size: 96%;
    font-family: Verdana, Arial, Helvetica, sans-serif;   
    color: #434343;
}

a {
    font-size: 95%;
    font-family: Verdana, Arial, Helvetica, sans-serif;   
    color: #009900;
}

h1 {
   font-size: 140%;  
   font-family: Verdana, Arial, Helvetica, sans-serif;   
   color: #009900;
   padding-bottom: 5px;
   border-bottom: 1px dashed #009900;
}

.mainContainer {
     width: 700px; 
     padding: 0px 10px 10px 10px; 
     background-color: #ffffff; 
     border-left: 1px solid #009900; 
     border-bottom: 1px solid #009900;
}

.ddoverlap{
}

.ddoverlap ul{
    padding: 0;
    margin: 60px 0px 0px 0px;
    font-weight: bold;
    font-size: 98%;
    list-style-type: none;
}

.ddoverlap li{
    display: inline;
    margin: 0;
}

.ddoverlap li a{
    padding: 3px 7px;
    text-decoration: none;
    padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/
    color: White;
    background: transparent url(/images/righttabdefault.gif) no-repeat 100% 1px; /*give illusion of shifting 1px down vertically*/
    position: relative;
    display: block;
    float: left;
    margin-left: -20px; /*shift tabs 20px to the left so they overlap*/
    left: 20px;
    font-size: 98%;
    font-weight: bold;
}

.ddoverlap li a:visited{
    color: White;
}
.ddoverlap li.selected a:visited{
    color: Black;
}

.ddoverlap li a:hover{
    text-decoration: underline;
}

.ddoverlap li.selected a{ /*selected tab style*/
    color: black;
    z-index: 100; /*higher z-index so selected tab is topmost*/
    top: 1px; /*Shift tab 1px down so the border beneath it is covered*/
    background: transparent url(/images/righttabselected.gif) no-repeat 100% 0;
    border-left: 1px solid #dbdbd5;
}

.ddoverlap li.selected a:hover{
    text-decoration: none;
}

.ddoverlap{
    height: 1%;  
}





.logo{
    padding: 0.5em;
}
.object{
    background: #D3EDD2;
    border: 1px solid #7EB677;
    padding: 4px !important;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 149px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #416541;
    display: block;
}
td.palleteItem{
    width: 149px;
}
.object_text_desc{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #F4771A;
    font-weight: bold;
}
a.descAncor:link,a.descAncor:visited, a.descAncor:active, a.descAncor:hover{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    color: #416541;
    text-decoration: none;    
    font-weight: bold;
}
.descText{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    color: #416541;
}
td.pallete{
    background-color: White;
    border-left: 1px solid #35742D;
    border-bottom: 1px solid #35742D;
    }
.grid{
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */




/* Vertical left navigation*/
#vertmenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 5px;
}

#vertmenu ul {
    list-style: none;
    margin: 0px !important;
    padding: 0px;
    border: none;
}

#vertmenu ul li {
    margin: 0px;
    padding: 0px; 
}

#vertmenu ul li a {
    display: block;
    border-bottom: 1px solid #009900;
    padding: 5px 0px 0px 25px;
    text-decoration: none;
    color: #009900;
    /* width:100%; */
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
    color: #000000;
    background-color: #ffffff;
}

/*-----------------------*/

/* Language switch*/

.langSwitch {
    color: #009900;
    font-weight: bold;
    font-size: 90%;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 30px;
    text-decoration: none;
     
}
.langSwich a {
    text-decoration: none; 
    color: #cccccc; 
}

/*------------------------*/ 

/* Fend object container */

.fend-obj-conatiner {
    background: #D3EDD2;
    border: 1px solid #7EB677;
    padding: 4px !important;            
    margin-left: 10px;
    margin-bottom: 10px;
    color: #416541;
    display: block;    
}
.fend-img-conatiner {
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    border: 1px solid #7EB677;
    padding: 0px !important;            
    margin-bottom: 4px;
}
.fend-descript-container {
    /* background: #EDF4EC; */
    color: #009900;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
}
.fend-descript-container a { 
    text-decoration: none;
    color: #F29E00;
    font-size: 1.1em;
    padding: 2px;          
}
.fend-descript-container a:hover {
    background: #FFFFFF;         
}

/*----------------------------*/

td.topLineLeft{
    text-align: left;
    color: #35742D;
    font-size: 0.8em;
}
td.topLineRight{
    text-align: right;
    color: #35742D;
    font-size: 0.8em;
}
.rowWhitePro{
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: smaller;
    font-weight: bold;
    padding: 2px;
}
.rowWhiteValue{
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: smaller;
}
.rowYellowPro{
    background-color: #FFFFE0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: smaller;
    font-weight: bold;
    padding: 2px;
}
.rowYellowValue{
    background-color: #DFFFDF;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: smaller;
}
div.Copyright{
     background: #C1DAC5;
     color: #1B731D;
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: smaller;
     padding: 0px;
     margin: 0px;
     text-align: center;
     position: absolute;
     width: 100%;
     top: 97.5%;
     right: 0;
     bottom: auto;
     left: 0;         
}

Самое интересное здесь:
Код

/* Vertical left navigation*/
#vertmenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 5px;
}

#vertmenu ul {
    list-style: none;
    margin: 0px !important;
    padding: 0px;
    border: none;
}

#vertmenu ul li {
    margin: 0px;
    padding: 0px; 
}

#vertmenu ul li a {
    display: block;
    border-bottom: 1px solid #009900;
    padding: 5px 0px 0px 25px;
    text-decoration: none;
    color: #009900;
    /* width:100%; */
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
    color: #000000;
    background-color: #ffffff;
}

Это меню в качестве вертикального списка. В FF нормально выводит список. Смотрится как нужно.
А в IE элементы списка имеют между собой расстояние где-то в 20 px то есть получается растянутым.
И из-за чего это?

Вот посмотрите в прикреплённом файле. там красным отмечено вдруг возникшее пространство между элементами списка.

Присоединённый файл ( Кол-во скачиваний: 11 )
Присоединённый файл  cssListScreenShot.JPG 9,49 Kb


--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1
PM MAIL WWW ICQ   Вверх
japanes
Дата 8.2.2007, 13:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7
думаю, что все читающие ваши стили остались счастливы, но было бы неплохо оценить еще и проблемный участок кода html, а тоне совсем понятно что за элемент с идентификатором #vertmenu
PM MAIL   Вверх
Enya
Дата 8.2.2007, 14:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет
japanes, ничего страшного вот ячейка:
Код

<tr>
        <td valign="top">
            <div id="vertmenu">    
                <ul>
                {$left_navi_services}
                {$left_navi_build}
                {$left_navi_contacts}
                {$left_navi_about}
                {$left_navi_faq}
                {$left_navi_vacancies}
                {$left_navi_partners}
                </ul>
            </div>
       </td>
</tr>



--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1
PM MAIL WWW ICQ   Вверх
Папараццы
Дата 8.2.2007, 14:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 475
Регистрация: 18.9.2006
Где: Баку

Репутация: нет
Всего: нет
У меня тоже что то такое было...MOZILLA выводит по размеру изображение...А потом уже проверяет margin i padding...Ну как бы преоритета больше ...А в IE наобарот...Проверь все margin  и padding ...


--------------------
/*---------------------------------------------------------------------------------*/
PM MAIL WWW ICQ MSN   Вверх
mishaSL
Дата 8.2.2007, 14:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54
Укажи высоту для <li> в IE. Скажем так и все должно работать:
Код

#vertmenu ul li {
    margin: 0px;
    padding: 0px; 
    //height: 30px;
}



--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
Enya
Дата 8.2.2007, 14:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет
mishaSL, 
Код

 //height: 30px;
ти две косые черты что это? зачем?


--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1
PM MAIL WWW ICQ   Вверх
mishaSL
Дата 8.2.2007, 14:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54
Код

 //height: 30px;


Этот код видит только IE, его не будут видеть другие браузеры. На самом деле в твоем случае можно и без них. От указания высоты хуже не будет. Только будь окуратнее, если в одном пункте меню будет две строки в FF и Opere может поплыть (по-этому я и поставил //) smile 


--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
japanes
Дата 8.2.2007, 15:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7
попробуй заменить один стиль
Код

#vertmenu ul li a:link {
    display: block;
    border-bottom: 1px solid #009900;
    padding: 5px 0px 0px 25px;
    text-decoration: none;
    color: #009900;
    /* width:100%; */
}


Цитата(Enya @  8.2.2007,  14:30 Найти цитируемый пост)
ти две косые черты что это? зачем? 

прости, но от этих слов я чуть со стула не упал smile два слэша - это однострочный комментарий, ИЕ его игнорирует
PM MAIL   Вверх
Enya
Дата 8.2.2007, 15:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет
Цитата
прости, но от этих слов я чуть со стула не упал smile два слэша - это однострочный комментарий, ИЕ его игнорирует
Я этого не знала


--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1
PM MAIL WWW ICQ   Вверх
japanes
Дата 8.2.2007, 15:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7
меня насмешило, не твое незнание, а сама фраза. Не обижайся ;)
PM MAIL   Вверх
mishaSL
Дата 8.2.2007, 15:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54
Цитата(japanes @  8.2.2007,  15:31 Найти цитируемый пост)
это однострочный комментарий, ИЕ его игнорирует


Не игнорирует, а наоборот интерпритирует (т.е. понимает). smile 


--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
japanes
Дата 8.2.2007, 15:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7
Цитата(mishaSL @  8.2.2007,  15:41 Найти цитируемый пост)
Не игнорирует, а наоборот интерпритирует (т.е. понимает). smile  

Миха, я рыдаю от смеха smile  - понимать и интерпретировать коммент - это значит, что строка следующая после коммента игнорируется, а ИЕ как раз игнорит коммент, потому-что строка читается ;)

Это сообщение отредактировал(а) japanes - 8.2.2007, 15:43
PM MAIL   Вверх
mishaSL
Дата 8.2.2007, 15:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54
japanes,  smile  smile  smile  блин либо я что-то не понимаю, либо ты плужишь http://slovari.yandex.ru/search.xml?text=%...%EE%E2%E0%F2%FC


--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
japanes
Дата 8.2.2007, 15:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7
Пардон за оффтоп. Пример:
комментарий понимается и интерпретируется
// данная строка игнорируется - коммент понимается.

комментарий не интерпретируется
// данная строка отображается или ее значение принимается чем-либо.

Вывод: рабочий комментарий (в нашем случае "//")- это проигнорированая строка после его обозначения "//", не рабочий комментарий - строка читается и понимается (основная задача коммента - это прятать, в нашем случае, строку)
PM MAIL   Вверх
mishaSL
Дата 8.2.2007, 16:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54
Ладно, а то уже оффтоп пошел. Главное что суть одна - в IE это работает, а в других браузерах нет.


--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1003 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.