TECH finding CSS problem with IE6?

White Stormy · Oct 16, 2008

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      /**
       * CSS properties to apply to all elements
       */
      * {
        color: #ffffff;
        margin: 0;
        padding: 0;
      }

      /**
       * CSS properties to apply to standard XHTML tags. Tags listed in alphabetical order.
       */
      body {
        border: 0;
        font: x-small arial, helvetica, clean, sans-serif;
      }

      /**
       * CSS properties to apply to custom classes. Classes listed in alphabetical order by parent.
       */
      .center {
        margin: 0 auto;
      }
      .section {
        clear: both;
        overflow: hidden;
      }
      .stuff {
        padding: 0.5em;
      }
      .tidy {
        margin-bottom: -100% ! important;
        padding-bottom: 100% ! important;
      }

      /**
       * CSS properties to apply to custom IDs and their child elements. IDs listed in alphabetical order.
       */
      #container {
        background-color: #660000;
        margin: 0 auto;
        width: 76em;
      }
      #footer {
        background: gray;
      }
      #header {
        background: orange;
      }
      #left {
        background-color: #000066;
        float: left;
        width: 18em;
      }
      #main {
        background-color: #660066;
        float: left;
        width: 100%;
      }
      #nav-top {
        background: yellow;
      }
      #nav-top a {
        color: red;
        cursor: pointer;
        display: block;
        padding: 0.5em 4em;
        text-align: center;
      }
      #nav-top a:hover {
        background-color: red;
        color: green;
        text-decoration: underline;
      }
      #nav-top ul {
        list-style: none;
        margin: 0 auto;
      }
      #nav-top ul li {
        float: left;
      }
      #right {
        background-color: #006600;
        float: right;
        width: 18em;
      }

      /**
       * CSS properties for column variables.
       */
      #main.cols-2 { width: 58em; }
      #main.cols-3 { width: 40em; }
    </style>
    <!--[if IE 6]>
    <style type="text/css">
      
    </style>
    <![endif]-->
    <title>HaleFx 1/2/3 Column Theme</title>
  </head>
  <body>
    <div id="container">
      <div id="header" class="section stuff">
        <img alt="logo" height="180" src="logo.png" style="float: left;" title="logo" width="160" /><h1>Header</h1>
      </div>
      <div id="nav-top" class="section">
        <div class="center">
          <ul>
            <li><a>Nav</a></li>
            <li><a>Nav</a></li>
            <li><a>Nav</a></li>
            <li><a>Nav</a></li>
            <li><a>Nav</a></li>
          </ul>
        </div>
      </div>
      <div class="section">
        <div id="left" class="tidy">
          <div class="stuff">
            Left Left Left<br />
            Left Left Left<br />
            Left Left Left<br />
            Left Left Left<br />
            Left Left Left<br />
            Left Left Left<br />
            Left Left Left<br />
            Left Left Left<br />
            Left Left Left<br />
          </div>
        </div>
        <div id="main" class="cols-3 tidy">
          <div class="stuff">
            Main Main Main<br />
            Main Main Main<br />
          </div>
        </div>
        <div id="right" class="tidy">
          <div class="stuff">
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
            Right Right Right<br />
          </div>
        </div>
      </div>
      <div id="footer" class="section stuff">
        Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. Footer.. 
      </div>
    </div>
  </body>
</html>

validates css3 (and css2) and xhtml strict.. works fine in FF, Chrome, Safari, Opera, IE7/8.. but I gotta have it work in IE6, and it doesn't.

Any ideas how I can fix this with conditional CSS?

IE6- incorrect, and unpredictable.

IE8- correct

kingtoad · Oct 16, 2008

My assumption is that your main container, right container, and footer, is being pushed below your left container. Double check all your widths, and be weary of padding. Familiarize yourself with the IE6 box model. If all else fails, ie conditionals are your friend.

White Stormy · Oct 16, 2008

kingtoad said:
My assumption is that your main container, right container, and footer, is being pushed below your left container. Double check all your widths, and be weary of padding. Familiarize yourself with the IE6 box model. If all else fails, ie conditionals are your friend.

I hadn't even noticed the width problem, but that was pretty easy to fix. my main problem was with overflow:hidden not working right in IE6.

...

well I have no idea how specifically I did it, but it works in IE6 now

White Stormy · Oct 18, 2008

and now it no longer works.

IE6 blows.

95vr4 · Oct 18, 2008

CSS problem in IE?....Imagine that.

The entire "Box Model" is completely fucked up in IE6

kingtoad · Oct 18, 2008

Use an IE6 conditional.

White Stormy · Oct 18, 2008

kingtoad said:
Use an IE6 conditional.

I am.. but I can't get anything to actually work in IE6.

When it does work it's so random. It'll work fine.. then I apply a text-align: center; to one div and the whole page breaks.

Apparently one fix is to specify line height all over the place

TECH finding CSS problem with IE6?

White Stormy

Take that, subspace!

kingtoad

Well-Known Member

White Stormy

Take that, subspace!

White Stormy

Take that, subspace!

95vr4

kingtoad

Well-Known Member

White Stormy

Take that, subspace!

Users who are viewing this thread