проблема с двумя колонками CSS-макета - в IE6 таблица в области содержимого выталкивается левой навигацией - PullRequest
Новая
       13

проблема с двумя колонками CSS-макета - в IE6 таблица в области содержимого выталкивается левой навигацией

0 голосов
/ 18 февраля 2009

У меня очень простая страница, которая не отображается должным образом в IE6. В этом браузере левая навигация сдвигает таблицу, которая находится в области содержимого. Может ли кто-нибудь помочь мне заставить таблицу оставаться наверху контейнера, где она должна быть, вместо того, чтобы давить на содержимое в левом элементе div?

Вот HTML-код для страницы: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css" media="screen">
            body

            #nav
            {
                float: left;
                width: 180px;
                background-color: #999;
            }

            #content
            {
                margin-left: 210px;
                background-color: #999;
            }

        </style>
    </head>
    <body>

        <div id="nav">
            <div>left content</div>
        </div>
        <div id="content">
            <table style="width: 100%; background-color: #666666">
            <tr><td>table</td>
            </tr>
            </table>
        </div>
    </body>
</html>

Вот URL, чтобы вы могли увидеть, как он выглядит:

http://www.morganpackard.com/cssTest.html

Ответы [ 4 ]

3 голосов
/ 18 февраля 2009

Вместо этого укажите ширину вашего стола 99%.

1 голос
/ 18 февраля 2009

Другое решение - сделать таблицу плавающей влево и шириной 100% ....

0 голосов
/ 18 февраля 2009

Если все остальное не помогло, используйте компоновку таблицы * утки и обложки * из пуристов CSS: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <style type="text/css" media="screen">

                        #nav
                        {
                            width: 180px;
                            background-color: #999;
                        }

                        #content
                        {
                            background-color: #999;
                        }

                </style>
        </head>
        <body>
            <table style="width:100%;">
                <tr>
                    <td id="nav">
                        <div>left content</div></td>

                    <td id="content">
                        <table style="width: 100%; background-color: #666666">
                        <tr><td>table</td>
                        </tr>
                        </table></td>
                </tr>
            </table>
        </body>
</html>
0 голосов
/ 18 февраля 2009

Вы также можете просто сделать содержимое плавающим влево: 

 #content
 {
     float:left;
     ...
 }

не забудьте отрегулировать оставленное поле

Другое решение, которое не совсем подходит для других браузеров: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
                <style type="text/css" media="screen">

                        #nav
                        {
                                float: left;
                                width: 180px;
                                background-color: #999;
                        }

                        #content
                        {
                                float: right;
                        }

                </style>
        </head>
        <body>
            <div id="container">
                <div id="nav">
                        <div>left content</div>
                </div>
                <div id="content">
                        <table style="width: 100%; background-color: #666666">
                        <tr><td>table</td>
                        </tr>
                        </table>
                </div>
            </div>
        </body>
</html>

Обратите внимание на контейнер и поплавок: справа;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...