3 replies [Last post]
lprintz
lprintz's picture
Offline
Regular
Last seen: 8 years 25 weeks ago
Timezone: GMT-5
Joined: 2009-04-23
Posts: 20
Points: 29

hello all!

I've been coding in tables for 12 years and am a recent CSS convert. I'm getting very proficient but this latest IE6 issue is driving me nuts!

This site works fine in all browsers except IE6...I set a background color of my 2 divs to clearly see the issue - coe.sky-sytes.com/template.html

I purposely set all margins to ZERO because of IE6 issues but this is a new problem...it seems my left column exceeds the width I specify which pushes the right column below it.

Before I started mucking with this...I validated everything (XHTML & CSS) and it passed with flying colors.

Any assistance would be MUCH appreciated!

DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS

#main {
	padding: 0px;
	width: 920px;
	margin: 0px;
	background-image:url(gfx/tile-main.gif);
	background-repeat:repeat-y;
}
 
#left {
	padding: 0px;
	width: 225px;
	margin: 0px;
	float: left;
	background-color:#FFFF00;
}
 
#right {
	padding: 0px;
	width:695px;
	margin: 0px;
	background-color:#FF33FF;
	float: left;	
}

HTML

<div id="main">
<div id="left">
<div id="left-nav">
  <ul>
    <li> <a class="nav" href="index.html">Home</a></li>
    <li> <a class="nav" href="make-a-nomination.html">Make a Nomination</a></li>
    <li> <a class="nav" href="#.html">Complete an Application</a></li>
    <li> <a class="nav" href="about-coe-awards.html">About the COE Awards</a></li>
 
    <li> <a class="nav" href="keynote-speaker.html">The Keynote Speaker</a></li>
    <li> <a class="nav" href="judging.html">The 2009 Judging Committee</a></li>
    <li> <a class="nav" href="meet-artist.html">Meet the Artist</a></li>
    <li> <a class="nav" href="#">The COE Blog</a></li>
    <li> <a class="nav" href="terms-conditions.html">Terms &amp; Conditions </a></li>
 
    <li> <a class="nav" href="news_public-relations.html">News &amp; Public Relations</a></li>
    <li> <a class="nav" href="#">The 2008 Awards</a></li>
  </ul>
</div>
<div id="left-separator"></div>
<div id="left-icons"><img src="gfx/icon-jack-clancy.jpg" alt="Message from Jack Clancy" /></div>
</div>
 
<div id="right">bla bla bla bla</div>
<div style="clear: both; height: 1px;"></div>

careys7
Offline
newbie
Last seen: 12 years 1 week ago
Timezone: GMT+12
Joined: 2009-04-23
Posts: 3
Points: 0

All you need to do is make a

All you need to do is make a second stylesheet for IE 6, and reduce the width until it fits. This should work.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie_stylesheet.css" />
<![endif]-->

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

IE6 has a "double margin"

IE6 has a "double margin" bug... If you float something left and have a left margin of say 5px on that item, then IE6 treats it as a 10px margin... This goes for top, bottom, and right as well... To override this error, you can add "display: inline;" to the element you are floating if you want to keep the margins on it...

lprintz
lprintz's picture
Offline
Regular
Last seen: 8 years 25 weeks ago
Timezone: GMT-5
Joined: 2009-04-23
Posts: 20
Points: 29

Thanks!

Thanks so much!

I was hoping to solve this without a redirect but it is what it is...friggin IE Smile

At least I don't need to code a whole site for IE6...another stylesheet would be easy.