HTML Forum

**CrazeDizzleD** · 02-02-2008, 07:14 PM

Hi, I'm making a new website with a friend and decided to use DIV's/CSS to code it instead of tables like I normally use. Now, I'm not very good at all doing it this way but figured it would be a learning experience.

My site is: www.tech-grid.com/test

It works fine in Firefox and Opera, but using IE6 the left column and center column appear to go under the right column. I've tried a few things but it only made it worse.

Here is my index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    
      <div class="container" align="center">
        <div id="banner_top"></div>
        <div id="banner_bottom">
          <div id="rightCol">filler<br /><br />filler<br /><br />filler<br /><br />filler<br /></div>
        </div>
        <div id="leftCol">
          <div class="navTop"></div>
          <div class="navCenter">
            <div class="navText">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Archive</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Register</a></li>
              </ul>
            </div>
          </div>
          <div class="navBottom"></div>
          filler<br />filler<br />filler<br />filler<br />filler<br />filler<br />filler<br />filler<br />filler<br />
        </div>
        
        <div id="content"><h1>Filler Title Filler Title....</h1><h2>Posted By: CrazeD<br />January 31, 2008 - 6:32PM</h2><p>filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content </p>
        <p>filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content </p>
        <p>filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content </p></div>
        <div id="footer"><p>Copyright 2008 Tech-Grid</p></div>
      </div>
    
  </body>
</html>

And my style.css:

Code:

/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img    {
margin: 0;
padding: 0;
}

ul    {
list-style: none;
}

img    {
border: 0;

body {
    background-color: #b2b2b2;
    height: 100%;
    margin: 0px;
    text-align: center;
    }

.container {
    background-color: #d6d6d6;
    width: 900px;
    height: 100%;
    margin: auto auto;
    border: 1px #000000;
    border-left-style: none;
    border-right-style: none;
    border-top-style: solid;
    border-bottom-style: solid;
    }

.container #banner_top {
    background-image: url(images/banner_top.gif);
    background-repeat: no-repeat;
    border: 1px #000000;
    border-left-style: solid;
    border-top-style: none;
    border-bottom-style: none;
    border-right-style: solid;
    width: 900px;
    height: 106px;
    }

.container #banner_bottom {
    background-image: url(images/banner_bottom.gif);
    background-repeat: no-repeat;
    border: 1px #000000;
    border-left-style: solid;
    border-top-style: none;
    border-bottom-style: none;
    border-right-style: none;    
    width: 900px;
    height: 53px;
    }

.container #leftCol {
    background-color: #959595;    
    border: 1px #000000;
    border-left-style: solid;
    border-top-style: none;
    border-bottom-style: solid;
    border-right-style: solid;
    float: left;
    width: 131px;
    }

.container #content {
    background-color: #959595;        
    border: 1px #000000;
    border-left-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
    border-right-style: solid;
    margin-top: 8px;
    margin-left: 140px;
    margin-right: 180px;
    text-align: left;
    padding: 10px;
    }

.container #content h1 {
    font-family: Serif;
    font-size: 20px;
    text-align: left;
    }

.container #content h2 {
    font-family: Serif;
    font-size: 10pt;
    text-align: left;
    font-weight: normal;
    }

.container #content p {
    font-family: Serif;
    font-size: 12pt;
    text-align: left;
    }

.container #content img {
    border: 1px solid #101010;
    }

.container #rightCol {
    background-color: #959595;
    border: 1px #000000;
    border-left-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
    border-right-style: solid;
    margin-top: 6px;
    float: right;
    width: 171px;
    }

.navTop {
    background-image: url(images/nav_top.gif);
    background-repeat: no-repeat;
    height: 10px;
    }

.navCenter {
    background-image: url(images/nav_center.gif);
    background-repeat: repeat-y;
    }

.navBottom {
    background-image: url(images/nav_bottom.gif);
    background-repeat: no-repeat;
    height: 6px;
    }

.navText {
    font-family: Serif;
    font-size: 10pt;
    text-align: left;
    }

.navText li {
    background-image: url(images/nav_button.gif);
    background-repeat: no-repeat;
    height: 18px;
    margin-left: 9px;
    margin-bottom: 3px;
    padding-left: 5px;
    }

.navText a, a:active, a:visited {
    color: #000000;
    text-decoration: none;
    }
    
.navText a:hover {
    color: #000000;
    text-decoration: underline;
    }

.container #footer { 
    padding: 0 40px;
} 
.container #footer p {
    margin: 0;
    padding: 10px 0;
}

Any help would be great, thanks.

**Mooofasa** · 04:38 AM

Display: inline to your floats.

If it's not because of the missing display: inline, then you need to use the IE backslash hack to reduce the width of that float by 1.

Here's your code, I took the liberty of optimising it:

Code:

html, body, ul, dl, li, h1, h2, h3, h4, img {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
img {
	border: 0;
}
body {
	margin: 0;
	text-align: center;
	background: #b2b2b2;
}
.container {
	width: 900px;
	margin: auto;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
	background: #d6d6d6;
}
.container #banner_top {
	border-left: solid 1px #000;
	border-right: solid 1px #000;
	width: 900px;
	height: 106px;
	background: url(http://www.tech-grid.com/test/images/banner_top.gif) no-repeat;
}
.container #banner_bottom {
	border-left: solid 1px #000;
	width: 900px;
	height: 53px;
	background: url(http://www.tech-grid.com/test/images/banner_bottom.gif) no-repeat;
}
.container #leftCol {
	border: solid 1px #000;
	border-top: 0;
	float: left;
	display: inline;
	width: 131px;
	background: #959595;
}
.container #content {
	border: solid 1px #000;
	margin: 8px 180px 0 140px;
	text-align: left;
	padding: 10px;
	background: #959595;
}
.container #content h1 {
	text-align: left;
	font: 20px Serif;
}
.container #content h2 {
	text-align: left;
	font: normal 10pt Serif;
}
.container #content p {
	text-align: left;
	font: 12pt Serif;
}
.container #content img {
	border: 1px solid #101010;
}
.container #rightCol {
	border: solid 1px #000;
	margin-top: 6px;
	float: right;
	display: inline;
	width: 171px;
	background: #959595;
}
.navTop {
	height: 10px;
	background: url(http://www.tech-grid.com/test/images/nav_top.gif) no-repeat;
}
.navCenter {
	background: url(http://www.tech-grid.com/test/images/nav_center.gif) repeat-y;
}
.navBottom {
	height: 6px;
	background: url(http://www.tech-grid.com/test/images/nav_bottom.gif) no-repeat;
}
.navText {
	text-align: left;
	font: 10pt Serif;
}
.navText li {
	background: url(http://www.tech-grid.com/test/images/nav_button.gif) no-repeat;
	height: 18px;
	margin: 0 0 3px 9px;
	padding-left: 5px;
}
.navText a, a:active, a:visited {
	color: #000;
	text-decoration: none;
}
.navText a:hover {
	color: #000;
	text-decoration: underline;
}
.container #footer {
	padding: 0 40px;
}
.container #footer p {
	margin: 0;
	padding: 10px 0;
}

**CrazeDizzleD** · 02-03-2008, 07:12 AM

Thanks, but that didn't fix it.

What is this "backslash hack" you speak of?

**Mooofasa** · 07:41 AM

Sorry, I meant for you to use the child selector. IE6 will ignore body>.container #leftCol, but compliant browsers won't.

Code:

.container #leftCol {
	border: solid 1px #000;
	border-top: 0;
	float: left;
	display: inline;
	width: 130px;
	background: #959595;
}
body > .container #leftCol{
	width:131px;
}

**CrazeDizzleD** · 02-03-2008, 08:05 AM

Just tried this and no luck there either. I even tried reducing the leftCol by several px, and no difference.

Thank you for the help, keep the suggestions rollin'.

**LadynRed** · 10:21 AM

Quote:

decided to use DIV's/CSS to code it instead of tables

Hallelujah !

Don't use hacks in your css. Use a separate CSS file for the 'fixes' needed to make IE tow the line and use conditional comments in your html to target that css file. It's also not usually necessary to hack.

The problem you're dealing with is IE's busted box model.
http://www.communitymx.com/content/a...989953B6F20B41
And all it's other bugs:
http://www.positioniseverything.net/ie-primer.html
http://www.positioniseverything.net/explorer.html

My suggestion -
Ok.. I messed around with your layout and here's what works and was easiest to solve;
- take the right column OUT of the #banner_bottom div
- next, move #rightcol in your html to just above #left_col
- add a negative top margin of about 45px to #right_col to pull it up into the space where you want it.

IE6 displays this properly as does Firefox.

Oh.. and don't do this:
<div class="container" align="center">

Read the stickies, I put one there specifically for centering.

**Mooofasa** · 02-03-2008, 10:52 AM

Quote:

Originally Posted by LadynRed

Don't use hacks in your css

Why not?

**chrishirst** · 02-03-2008, 12:18 PM

because "hacks" are usually using one bug to work around another bug.

At some point in time the "bug" will be fixed and the hack then usually screws up the browser in some other way.
Which is what is happening now in the continuing Internet Explorer saga with ver 7.

**CrazeDizzleD** · 02-03-2008, 04:23 PM

Much thanks LadynRed, this worked.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!