VPF::Растягивается div по высоте в 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

japanes

Дата 8.2.2007, 13:33 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

Репутация: 7
Всего: 7

думаю, что все читающие ваши стили остались счастливы, но было бы неплохо оценить еще и проблемный участок кода html, а тоне совсем понятно что за элемент с идентификатором #vertmenu

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

Папараццы

Дата 8.2.2007, 14:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

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

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

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

mishaSL

Дата 8.2.2007, 14:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Укажи высоту для <li> в IE. Скажем так и все должно работать:

Код


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

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

Лучший способ научиться программированию - это посмотреть как это делают другие...

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

mishaSL

Дата 8.2.2007, 14:33 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Код


 //height: 30px;

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

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

Лучший способ научиться программированию - это посмотреть как это делают другие...

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

два слэша - это однострочный комментарий, ИЕ его игнорирует

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

japanes

Дата 8.2.2007, 15:39 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

Репутация: 7
Всего: 7

меня насмешило, не твое незнание, а сама фраза. Не обижайся ;)

mishaSL

Дата 8.2.2007, 15:41 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Цитата(japanes @ 8.2.2007, 15:31

)

это однострочный комментарий, ИЕ его игнорирует

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

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

Лучший способ научиться программированию - это посмотреть как это делают другие...

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

mishaSL

Дата 8.2.2007, 15:50 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

japanes, smile

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

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

Лучший способ научиться программированию - это посмотреть как это делают другие...

japanes

Дата 8.2.2007, 15:56 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

Репутация: 7
Всего: 7

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

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

Вывод: рабочий комментарий (в нашем случае "//")- это проигнорированая строка после его обозначения "//", не рабочий комментарий - строка читается и понимается (основная задача коммента - это прятать, в нашем случае, строку)

mishaSL

Дата 8.2.2007, 16:04 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

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

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

Лучший способ научиться программированию - это посмотреть как это делают другие...

japanes

Дата 8.2.2007, 16:09 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

Репутация: 7
Всего: 7

Enya, ты стили поменяла? заработало?

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »