HELP: CSS bug - IE6 [Archive] - Graphic Design Forum

Click to See Complete Forum and Search --> : HELP: CSS bug - IE6

jasonchan

03-06-2007, 02:04 AM

cant seem to figure out this bug and its been buggin me for the last few days. Basically and image is placed at the end of the main content container but there is padding or some kind of white space that is viewable for some reason.

I removed the background colors for the relevant divs but this still occurs. anyone know what's goin on??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Escrow Company</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">

<div id="header">
<div id="nav">
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Open Escrow</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Escrow Process</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

<div id="content" class="clearfix">

<div id="home_sidebar">
<img src="images/home-checkbox.gif" />
<ul>
<li>Sub Category 1</li>
<li>Sub Category 2</li>
<li>Sub Category 3</li>
<li>Sub Category 4</li>
<li>Sub Category 5</li>
<li>Sub Category 6</li>

</ul>

</div>


<div id="main_content">
<img src="images/company_logo.gif" width="562" height="50" />
<img src="images/about-us.gif" style="margin-top: 20px;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non neque eu erat sodales mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla tristique lacus. In hac habitasse platea dictumst. Sed ultricies. Vestibulum vehicula, eros vitae sodales eleifend, nisi risus commodo massa, id molestie neque erat at nulla. Morbi ac diam. Aliquam faucibus. Ut vestibulum odio. Nulla dictum libero vitae orci.
</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non neque eu erat sodales mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla tristique lacus. In hac habitasse platea dictumst. Sed ultricies. Vestibulum vehicula, eros vitae sodales eleifend, nisi risus commodo massa, id molestie neque erat at nulla. Morbi ac diam. Aliquam faucibus. Ut vestibulum odio. Nulla dictum libero vitae orci.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non neque eu erat sodales mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla tristique lacus. In hac habitasse platea dictumst. Sed ultricies. Vestibulum vehicula, eros vitae sodales eleifend, nisi risus commodo massa, id molestie neque erat at nulla. Morbi ac diam. Aliquam faucibus. Ut vestibulum odio. Nulla dictum libero vitae orci.
</p>

<img src="images/inside-employees.gif" />
</div>


</div>

</div>

<div id="footer">
<p>© Company</p>
</div>
</body>
</html>

body {
margin: 0;
padding: 0;
text-align: center;
background: #c6c6c6 url(images/bg-home.gif) top left repeat-x;
}

#container {
text-align: left;
width: 768px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
}

#nav {
height: 55px;
background-image: url(images/bg-nav.gif);
background-repeat: repeat-x;
}
#main_content p {
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #707070;
}

#home_sidebar {
float: left;
width: 200px;
background-color: #FFFFFF;
}

#home_sidebar li {
list-style-image: url(images/box-icon.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #c09e59;
}

#nav ul {
list-style-type: none;
padding: 0px;
margin: 0;
height: 55px;

}

#main_content {
background-color: #FFFFFF;
float: right;
width: 562px;
margin: 0;
padding: 0;
}

#content {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}

#nav ul li {
float: left;
}

#nav ul li a {
display: block;
text-decoration: none;
height: 55px;
text-indent:-3000px; /* hides text on navigation links */
}

/* clear fix */

.clearfix:after {/*The peroid is the last thinb before the div closes*/
content: ".";/*inline elements doin't respond to the clear property*/
display: block;/*Ensure the peroid is not visible*/
height: 0;/*Make the container clear the peroid*/
clear: both;/*Further ensures the peroid is not visible*/
visibility: hidden;/*Further ensures the peroid is not visible*/
}
.clearfix {
display: inline-block;/*A fix for IE mac*/
}
*html .clearfix {/*the holly hack for a bug in IE6 for Windows*/
height: 1%;
}
.clearfix {
display: block;/*the holly hack for a bug in IE6 for Windows*/
}

#footer {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
padding-top:10px;
clear:both;
text-align: right;
width: 768px;
margin-right: auto;
margin-left: auto;
}

Alex Traska

03-06-2007, 02:12 AM

03-06-2007, 02:16 AM

Not sure, but you could probably write a conditional and fix that.

BTW, this hack that you're using:

*html

... don't do that because they fixed this in IE7 and it'll get you intro trouble. Use conditionals instead.

jasonchan

03-06-2007, 06:00 AM

is there a reason for the image of the employees being inside the content/container DIV rather than being placed in the footer div, possibly as a background image, rather than HTML coding it into the div? Then you could place it absolutely to the bottom of the page, no?

the footer is the grey portion below the image (if you take a look at the code and place the image there, it would make the left portion of image grey).

jasonchan

03-06-2007, 06:01 AM

ixy

03-06-2007, 07:26 AM

It could be a bug called 3 pixel gap, that sometimes appears in IE6 & earlier between something floated and something non-floated.
If you put this into conditional comments, it might solve it:
#footer {margin-top: 0; }
#main_content { margin-bottom: -3px; }
If it doesn't, maybe it is between footer's right margin set to auto, and main_content's left margin, because it's floated right. (but that's just a guess, I'm not experienced, I might be wrong)

03-06-2007, 08:38 AM

what do you mean by conditionals?

IF (this condition)THEN (instruction)

This is an important article imo http://www.thinkvitamin.com/features/css/stop-css-hacking

An example would be, instead of this:

*html .clearfix {/*the holly hack for a bug in IE6 for Windows*/
height: 1%;
}
}

The conditional would be this (could also be a link to an external stylesheet):

John G

03-06-2007, 03:57 PM

One thing, it works, it's messy, no idea why.

,,,,,,,,,,,,,,
</p>

<img src="images/inside-employees.gif" />
</div>


</div>

</div>

<div id="footer">
<p>© Company</p>
</div>
Anyways, see all those hard returns? Start removing them until you get rid of that line

like:
</p><img src="images/inside-employees.gif" /></div></div></div><div id="footer"><p>© Company</p></div>

no hard returns in your code between an open and closed div. Works better and looks less... distrubing when you split up the code into includes, but that will get rid of the space. go figure

jasonchan

03-06-2007, 06:56 PM

referring to ixy's response, i simply added a: margin-top: -4px to the #content div to relieve this.

EC, I tried using the conditional statements but it didn't work. Didn't seem like that was where the problem was.

although this issue has been fixed, im still just curious if it is the right solution or if there are other alternatives...

thanks for your help guys!

Patrick Shannon

03-06-2007, 07:47 PM

IE is very notorious for adding white space on some returns in the code. Often times I will do what John G suggested and it will fix the problem (despite making the code look uglier).

03-06-2007, 08:10 PM

really. that is weird!

jasonchan

03-06-2007, 10:02 PM

IE is very notorious for adding white space on some returns in the code. Often times I will do what John G suggested and it will fix the problem (despite making the code look uglier).

Yea that works too... its so ironic. so this is what i found out. the ending div tag needs to be placed right next to the image for it to work.

<p>Lorem sapien, quis hendrerit odio orci ac nibh.</p>
<img src="images/inside-employees.gif" /></div>

not terribly ugly and a very effective solution.

thanks john g for that suggestion.