WEB finding CSS problem with IE6?

Discussion in 'OT Technology' started by White Stormy, Oct 16, 2008.

  1. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,588
    Likes Received:
    116
    Location:
    Sparkopolis
    http://halefx.com/temp/temp.html
    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.
    [​IMG]

    IE8- correct
    [​IMG]
     
    White Stormy, Oct 16, 2008
    #1
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    56,157
    Likes Received:
    166
    Location:
    Los Angeles
    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.
     
    kingtoad, Oct 16, 2008
    #2
  3. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,588
    Likes Received:
    116
    Location:
    Sparkopolis
    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

    [​IMG]
     
    White Stormy, Oct 16, 2008
    #3
  4. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,588
    Likes Received:
    116
    Location:
    Sparkopolis
    and now it no longer works.

    IE6 blows.
     
    White Stormy, Oct 18, 2008
    #4
  5. 95vr4

    95vr4 OT Supporter

    Joined:
    Oct 6, 2004
    Messages:
    2,513
    Likes Received:
    0
    Location:
    Weddington, NC
    CSS problem in IE?....Imagine that.


    The entire "Box Model" is completely fucked up in IE6
     
    95vr4, Oct 18, 2008
    #5
  6. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    56,157
    Likes Received:
    166
    Location:
    Los Angeles
    Use an IE6 conditional.
     
    kingtoad, Oct 18, 2008
    #6
  7. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,588
    Likes Received:
    116
    Location:
    Sparkopolis
    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
     
    White Stormy, Oct 18, 2008
    #7

Share This Page