VPF::Пункты меню в IE и в Opera 11.11 - Форум программистов

Voldemar2004

Дата 16.6.2011, 16:07 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1650
Регистрация: 25.12.2004

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

Код


<!DOCTYPE html>
<html>

    <HEAD>
        <TITLE>Таблица</TITLE>
    </HEAD>
    
<body> 

    <TABLE align="center" width="1024" height="90" border="1" cellspacing="0" cellpadding="0">
        <TR>
            <TD>
            &nbsp;
            </TD>
        </TR>
    </TABLE>
  
    <TABLE align="center" width="1024" height="150" border="1" cellspacing="0" cellpadding="0">
        <TR>
            <TD width="92" border="1" align="center">
                 <div id="left">
                    <ul>
                        <li><a href="">Пункт 1</a></li>
                        <li><a href="">Пункт 2</a></li>
                        <li><a href="">Пункт 3</a></li>
                        <li><a href="">Пункт 4</a></li>
                        <li><a href="">Пункт 5</a></li>
                        <li><a href="">Пункт 6</a></li>
                        <li><a href="">Пункт 7</a></li>
                        <li><a href="">Пункт 8</a></li>                       
                    </ul>
                </div>
            </TD>
            
            <TD width="928" border="1" align="center">
                &nbsp;123 
            </TD>            
        </TR>        
    </TABLE>    
</body>
</html>

<STYLE type="text/css">

#left {
    width: 130px;
    padding-bottom: 1px;
    float: left;
}

#left ul {
    list-style: none;
    font-family: arial, tahoma, sans-serif;
    padding: 0px 0px 0px 0px;
    font-size: 12px;
}


#left ul li a {
    display: block;
    border-bottom: 1px solid #cfcfcf;
    padding: 10px 0px;
    margin: 00px 00px;
    text-decoration: none;
    color: #000;
}
#left ul li:last-child a { border: none; }
#left ul li a:hover { background: #e3e3e3; }

</STYLE>

В Opera нормально отображается, в IE слева пустое пространство, как это исправить ?

Это сообщение отредактировал(а) Voldemar2004 - 16.6.2011, 16:09

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

i_i
(';')
(V)

user posted image

olldman

Дата 16.6.2011, 16:18 (ссылка)

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

Загрузка ...

Дед

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

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

Цитата

... как это исправить ?

- обнулить отступы элементам. Изначально.
*{margin:0px;padding:0px;}

Voldemar2004

Дата 16.6.2011, 16:23 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1650
Регистрация: 25.12.2004

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

Цитата(olldman @ 16.6.2011, 17:18

)

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

Это надо в код вставить ?

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

i_i
(';')
(V)

user posted image

olldman

Дата 16.6.2011, 17:21 (ссылка)

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

Загрузка ...

Дед

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

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

Да, в стили, в самое начало.

Voldemar2004

Дата 16.6.2011, 17:28 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1650
Регистрация: 25.12.2004

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

olldman, теперь в Opera вся таблица к левому краю прилипла.

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

i_i
(';')
(V)

user posted image

olldman

Дата 16.6.2011, 17:42 (ссылка)

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

Загрузка ...

Дед

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

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

1. Не может этого быть из за обнуления.
2. Атрибут align уже давно является deprecated, не следует его применять. Пропишите для таблицы все в стилях:

Код


table{border-collapse:collapse;width:1024px;margin:0px auto;}
td{border:1px solid #cfcfcf;} /*- если нужны границы.*/

3. Атрибута height для элемента table не существует в природе, если нужна высота - пишем в стилях.

Voldemar2004

Дата 16.6.2011, 17:57 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1650
Регистрация: 25.12.2004

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

Цитата(olldman @ 16.6.2011, 18:42

)

3. Атрибута height для элемента table не существует в природе, если нужна высота - пишем в стилях.

Как не существует ? Я меняю атрибут height для тэга <TABLE> и всё прекрасно работает smile

я в справочнике смотрю - там есть.
Причём написано, что высоту таблицы можно задавать и в %.

Цитата(olldman @ 16.6.2011, 18:42

)

1. Не может этого быть из за обнуления.

Увы, у меня Opera 11.11 - и это есть, все таблицы не по центру, а приклеились к левому краю, хотя в Safari нормально всё.

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

i_i
(';')
(V)

user posted image

olldman

Дата 17.6.2011, 05:43 (ссылка)

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

Загрузка ...

Дед

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

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

Цитата

Как не существует ?

- да вот как то так, читайте спецификацию.

Цитата

Увы, у меня Opera 11.11 - и это есть, все таблицы не по центру, а приклеились к левому краю

- значит что-то не правильно прописали. Вот ваш код, выглядит везде одинаково:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Table</title>
<style type="text/css">
*{margin:0px;padding:0px;}
html{height:100%;}
body{width:100%;font:12px Arial;}
table{border-collapse:collapse;width:1024px;margin:0px auto;}
td{border:1px solid #cfcfcf;}
table.th{height:90px;}
table.tb{height:150px;}
td.first{width:130px;}
td.two{width:890px;text-align:center;}
#left {
    width: 130px;
    padding-bottom: 1px;
}
#left ul {
    list-style: none;
    font-family: arial, tahoma, sans-serif;
    padding:0px;
    font-size: 12px;
    text-align:center;
}
#left ul li a {
    width:100%;
    display: block;
    border-bottom: 1px solid #cfcfcf;
    padding: 10px 0px;
    margin:0px;
    text-decoration: none;
    color: #000;
}
#left ul li:last-child a { border: none; }
#left ul li a:hover { background: #e3e3e3; }
</style>
  </head>
  <body>
    <table class="th" summary="">
        <tr>
            <td>
            &nbsp;
            </td>
        </tr>
    </table>

    <table class="tb" summary="">
        <tr>
            <td class="first">
                 <div id="left">
                    <ul>
                        <li><a href="#">Пункт 1</a></li>
                        <li><a href="#">Пункт 2</a></li>
                        <li><a href="#">Пункт 3</a></li>
                        <li><a href="#">Пункт 4</a></li>
                        <li><a href="#">Пункт 5</a></li>
                        <li><a href="#">Пункт 6</a></li>
                        <li><a href="#">Пункт 7</a></li>
                        <li><a href="#">Пункт 8</a></li>
                    </ul>
                </div>
            </td>

            <td class="two">
                &nbsp;123
            </td>
        </tr>
    </table>
  </body>
</html>

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