TECH finding CSS problem with IE6?

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
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.
66642c362d99d1fa50ac8e5f150b1fcd.png


IE8- correct
d81a6725e7296c3925339fe20bbd3673.png
 

kingtoad

Well-Known Member
Sep 2, 2003
55,788
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.
 
TS
TS
White Stormy

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
Sparkopolis
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

5eaffa07547a877b0258b5a0df94e868.png
 
TS
TS
White Stormy

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
Sparkopolis
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
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
461
Guests online
61
Total visitors
522

Forum statistics

Threads
369,630
Messages
16,901,579
Members
86,875
Latest member
Theodor