Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Пункты меню в IE и в Opera 11.11


Автор: Voldemar2004 16.6.2011, 16:07

Код

<!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 слева пустое пространство, как это исправить ?

Автор: olldman 16.6.2011, 16:18
Цитата

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

Автор: Voldemar2004 16.6.2011, 16:23
Цитата(olldman @  16.6.2011,  17:18 Найти цитируемый пост)
*{margin:0px;padding:0px;}


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

Автор: olldman 16.6.2011, 17:21
Да, в стили, в самое начало.

Автор: Voldemar2004 16.6.2011, 17:28
olldman, теперь в Opera вся таблица к левому краю прилипла.

Автор: olldman 16.6.2011, 17:42
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
Цитата(olldman @  16.6.2011,  18:42 Найти цитируемый пост)
3. Атрибута height для элемента table не существует в природе, если нужна высота - пишем в стилях.


Как не существует ? Я меняю атрибут height для тэга <TABLE> и всё прекрасно работает smile я в справочнике смотрю - там есть.
Причём написано, что высоту таблицы можно задавать и в %.

Цитата(olldman @  16.6.2011,  18:42 Найти цитируемый пост)
1. Не может этого быть из за обнуления.


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

Автор: olldman 17.6.2011, 05:43
Цитата

Как не существует ? 
 - да вот как то так, читайте спецификацию.
Цитата

Увы, у меня 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>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)