Geek Answers Handbook

Dude, where is my column?

(Apologies for the title, but that concerns how I feel now.)

Recently, I was given the opportunity ... to completely reverse engineer the layout of the website that I support. In the interest of preserving my simple CSS and HTML semantics, I decided to use a modified version of the holy grail layout (the main difference moves the right column inside the center column, which simplifies the situation even more and makes the center column fixed in width).

After a small number of freelancers, I had a new layout that worked in FF3, Chrome, and Opera, which meant that it was time to launch IE6. As expected, the layout breaks (the left column is completely missing). Nevertheless, I did not expect it to break so spectacularly - it seems that I caused an IE6 error, which I can neither isolate nor eliminate.

When adapting the holy grail layout, I first dropped the hack using IE6 that it uses, it does not (shouldn't it?) Be necessary with the changes made to the right column, since its accounts for this column width that does not appear on one level in my layout. However, adding it back was my first guess, but it turned out that a very strange number was needed (246px, which is not shown anywhere else in the stylesheet), so I tried resizing the window to make sure that it wasn’t related to page size . To my great surprise, the column then jumped 1000 pixels to the right, far beyond the edge of the page.

Going back and deleting hacked IE6, the same behavior occurs when you resize, only instead of skipping from the left side of the page layout, it appears out of nowhere on the right side of the layout, I'm a monkey with every part of the layout that even seems remotely connected, and Googled all IE6 rendering errors that I know, but don't seem to be able to eliminate the transition behavior on the page.

Has anyone seen this error before if an error? The full code follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Modified grail layout</title>

        <style type="text/css">
            * {
                border: 0;
                margin: 0;
                padding: 0;
            }

            #main {
                background: white;
                overflow: auto;
                padding-left: 180px;
            }

            #content {
                background: #dfd;
                float: left;
                padding: 10px 10px 0;
                width: 800px;
            }

            #left {
                background: #ccc;
                float: left;
                margin-left: -100%;
                position: relative;
                padding: 10px 10px 0;
                right: 180px;
                width: 160px;
            }

            #right {
                background: #fdd;
                float: right;
                margin-bottom: 10px;
                padding: 10px 10px 0;
                width: 160px;
            }

            #top {
                margin: 0 auto;
                width: 1000px;
            }

            body {
                background: #ddf;
            }

            /* fake content */

            #cc1 {
                height: 320px;
                width: 800px;
            }

            #cc2 {
                height: 320px;
                margin-right: 190px;
            }

            #cc3 {
                height: 160px;
                margin-right: 190px;
            }

            #lc1 {
                height: 120px;
                margin-left: auto;
                margin-right: auto;
                width: 144px;
            }

            #lc2 {
                height: 300px;
                width: 160px;
            }

            #lc3 {
                height: 400px;
                width: 160px;
            }

            #rc1 {
                height: 400px;
                width: 160px;
            }

            #rc2 {
                height: 300px;
                width: 160px;
            }

            div.fake-content {
                background: #666;
                color: white;
                margin-bottom: 10px;
            }

            /* Internet Explorer (all) */

            #ie body {
                text-align: center;
            }

            #ie #left {
                text-align: center;
            }

            #ie #left * {
                text-align: left;
            }

            #ie #right {
                margin-bottom: 0;
            }

            #ie #top {
                text-align: left;
            }

            /* Internet Explorer 6 */

            #ie6 #left {
                left: 246px; /* WTF!? */
            }
        </style>
    </head>

    <body>
        <!--[if IE 6]><div id="ie"><div id="ie6"><![endif]-->
        <!--[if IE 7]><div id="ie"><div id="ie7"><![endif]-->
        <!--[if IE 8]><div id="ie"><div id="ie8"><![endif]-->

        <div id="top">
            <div id="main">
                <div id="content">
                    <div id="cc1" class="fake-content">cc1</div>

                    <div id="right">
                        <div id="rc1" class="fake-content">rc1</div>
                        <div id="rc2" class="fake-content">rc2</div>
                    </div>

                    <div id="cc2" class="fake-content">cc2</div>
                    <div id="cc3" class="fake-content">cc3</div>
                </div>

                <div id="left">
                    <div id="lc1" class="fake-content">lc1</div>
                    <div id="lc2" class="fake-content">lc2</div>
                    <div id="lc3" class="fake-content">lc3</div>
                </div>
            </div>

            <p id="footer">&copy;2009 Blah blah blah</p>
        </div>

        <!--[if IE]></div></div><![endif]-->
    </body>
</html>
+5
source share
3 answers

The job position: relativefor #topfixes it in IE6, believe it or not.

See this , these , etc.

+4
source

! ( , 2000 ), .

? , , !

" " !

* , css zealots

:

css ( :))

..

!

0

, :

<html>
<head>
<title>3 column table</title>
</head>
<body>

<table style="width:100%;">
<tr>
<td style="width:20px;border: solid 1px black;">Left column</td>
<td style="border: solid 1px black;">Center Column</td>
<td style="width:20px;border: solid 1px black;">Right column</td>
</tr>
</table>

</body>
</html>

, .

-2

More articles:


All Articles