[SOLVED] All-CSS design having issues in IE6, what went wrong?

[ultrus]

Hello,

In my efforts to make more CSS based designs, I designed this template for a charity website:

http://www.christopherstevens.cc/charity

 

It looks great in FireFox and Safari, but when I go to IE, WHOA! It's close, but:

1. Divs to the right are not wrapping with divs to the left. How do I fix this?

2. It seems that there is a 1px border or gap somewhere showing up, leaving odd spacing. Any idea where that is?

 

Here is the css for reference:

 

html, body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #e0d9ca;
height:100%;
    margin: 0px;
    padding: 0px 0px 24px 0px;
}

img {
border: 0px;
}

h1 {
color: #003366;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
margin-top: 0px;
padding-top: 0px;
}

a {
color: #32738F;
}

a:active {
text-decoration: none;
}

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

div {
border: 0px;
}

#pageContentRight h2 {
color: #003366;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}

#shadowBox {
background: url(images/fadeBack.gif) top center;
width: 1041px;
display: block;
position: absolute;
left: 50%;
margin-left: -521px;
top: 0px;
margin-bottom: 24px;
padding-top: 12px;
}

#contentHolder {
background-color: #FFFFFF;
margin: 0px 53px 0px 53px;
display: block;
}

#header {

}

#headerTop {
height: 88px;
}

#headerTopLeft {
float: left;
width: 300px;
}

#headerTopRight {
margin-left: 515px;
width: 420px;
}

#headerFlash {
height: 194px;
background-color: #b6b0a4;
}

#headerNav {
height: 26px;
background: url(images/navBack.gif) #2f7590 left top repeat-x;
text-align: center;
padding-left: 88px; /* change with revised menu items */
}

.headerNavItem {
margin: 0px 6px 0px 6px;
float: left;
}

#pageContent {
margin: 24px 18px 18px 18px;
}

#pageContentLeft {
width: 572px;
float: left;
}

#pageContentRight {
margin-left: 608px;
}

#footer {
background-color: #878276;
color: #FFFFFF;
font-size: 10px;
padding: 6px 18px 6px 18px;
}

#footer a {
color: #FFFFFF;
}

#footer a:active {
text-decoration: underline;
}

#footer a:link {
text-decoration: underline;
}

#footer a:visited {
text-decoration: underline;
}

#footer a:hover {
text-decoration: none;
}

#baseGap {
height: 24px;
clear: both;
}

.break {
clear: both;
}

.framedBoxContent {
padding: 6px 24px 6px 24px;
}

#raisedBox {
width: 293px;
}

.raisedAmount {
color: #003366;
font-size: 24px;
font-weight: bold;
}

 

And body content...

 

<div id="shadowBox">
<div id="contentHolder">
	<div id="header">
		<div id="headerTop">
			<div id="headerTopLeft">
				<a href="/"><img src="images/vacationHomesForCharity.gif" alt="Vacation Homes for Charity" /></a>
			</div>
			<div id="headerTopRight">
				<a href="http://thesociety.com"><img src="images/byTheSociety.gif" alt="Brought to You by The Society" /></a>
			</div>
		</div>
		<div id="headerFlash">
			<img src="images/flashFiller.jpg" alt="" />
		</div>
		<div id="headerNav">
			<div class="headerNavItem"><a href="#"><img src="images/navHome_n.gif" alt="Home" name="home" id="home" onmouseover="MM_swapImage('home','','images/navHome_o.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
			<div class="headerNavItem"><a href="#"><img src="images/navBlog_n.gif" alt="Blog" name="blog" id="blog" onmouseover="MM_swapImage('blog','','images/navBlog_o.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
			<div class="headerNavItem"><a href="#"><img src="images/navAbout_n.gif" alt="About" name="about" id="about" onmouseover="MM_swapImage('about','','images/navAbout_o.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
			<div class="headerNavItem"><a href="#"><img src="images/navHowItWorks_n.gif" alt="How It Works" name="howItWorks" id="howItWorks" onmouseover="MM_swapImage('howItWorks','','images/navHowItWorks_o.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
			<div class="headerNavItem"><a href="#"><img src="images/navBenefits_n.gif" alt="Benefits" name="benefits" id="benefits" onmouseover="MM_swapImage('benefits','','images/navBenefits_o.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
			<div class="headerNavItem"><a href="#"><img src="images/navCharities_n.gif" alt="Charities" name="charities" id="charities" onmouseover="MM_swapImage('charities','','images/navCharities_o.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
			<div class="headerNavItem"><a href="#"><img src="images/navFAQS_n.gif" alt="FAQs" name="faqs" id="faqs" onmouseover="MM_swapImage('faqs','','images/navFAQS_o.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
			<div class="headerNavItem"><a href="#"><img src="images/navContactUs_n.gif" alt="Contact Us" name="contactUs" id="contactUs" onmouseover="MM_swapImage('contactUs','','images/navContactUs_o.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
		</div>
	</div>

	<div id="pageContent">
		<div id="pageContentLeft">
			<h1>Donate Time at Vacation Homes and Get Rewards</h1>
			<div>
				<div><img src="images/letterTop.gif" alt="" /></div>
				<div class="framedBoxContent" style="background:url(images/letterBack.gif) top left repeat-y;">
					<p>Dear reader,</p>
					<p>Our goal is to make the process of donating time at a vacation home to a charity easy and efficient for all parties.</p>
					<img src="images/letterCampFire.jpg" alt="vacation home camp fire" style="float: left; margin: 0px 12px 12px 0px;" /><p>In the fall of 2008, we, The Society (<a href="http://thesociety.com">TheSociety.com</a>), an elite vacation experience company, opened up our platform to help charities source vacation homes for their auctions and other fund raising events.   We tested this new service with 4 charities at it was a huge success.  We helped raise over $20,000 and it was easy.</p>
					<p>So we created <a href="http://vacationhomesforcharity.org">VacationHomesForCharity.org</a> to highlight success stories and news regarding this new service, and for 2009 we have some audacious goals.  We are going to giveaway over 1000 nights to charities!  It’s time to go big.  And now that we have over 500 charities that need our help we need more vacation homes.</p>
					<p>If you own a vacation home or know someone with a vacation home that sits vacant part of the year then contact us immediately or just register at <a href="http://thesociety.com">TheSociety.com/signup</a> and get involved today.</p>
					<div class="break"></div>
					<p>Kind Regards,</p>
					<p>[sig image here]</p>
					<p>Mike McFadden<br />
					Co-Founder of The Society<br />
					mike@thesociety.com</p>
				</div>
				<div><img src="images/letterBot.gif" alt="" /></div>
			</div>
		</div>
		<div id="pageContentRight">
			<div id="raisedBox">
				<div><img src="images/raisedTop.gif" alt="" /></div>
				<div class="framedBoxContent" style="background:url(images/raisedBack.gif) top left repeat-y; text-align:Center;">
					Total Raised for Charity:<br />
					<div class="raisedAmount">$9,324,674.29</div>
				</div>
				<div><img src="images/raisedBot.gif" alt="" /></div>
			</div>

			<h2><img src="images/iconInvitation.gif" alt="event" style="vertical-align: middle;" /> Upcoming Events</h2>
			<a href="#">12/30/08 - Link Of Importance Goes Here</a><br />
			<a href="#">12/30/08 - Link Of Importance Goes Here</a><br />
			<a href="#">12/30/08 - Link Of Importance Goes Here</a><br />
			<a href="#">12/30/08 - Link Of Importance Goes Here</a><br />
			<a href="#">View All Events...</a>

			<h2><img src="images/iconHeart.gif" alt="event" style="vertical-align: middle;" /> Featured Charities</h2>
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">View All Charities...</a>

			<h2><img src="images/iconPencil.gif" alt="event" style="vertical-align: middle;" /> Recent Blog Posts</h2>
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">Link Of Importance Goes Here</a><br />
			<a href="#">View All Blogs...</a>
		</div>
		<div class="break"></div>
	</div>

	<div id="footer">
		Copyright © 2008-2009 <a href="http://thesociety.com">The Society</a>. | <a href="#"><img src="images/rss.png" alt="rss" style="vertical-align: middle;" /></a> <a href="#">RSS</a> | <a href="#">Home</a> | <a href="#">Blog</a> | <a href="#">About</a> | <a href="#">How it Works</a> | <a href="#">Benefits</a> | <a href="#">Participating Charities</a> | <a href="#">FAQs</a> | <a href="#">Contact Us</a> | Powered by <a href="http://www.wordpress.org">WordPress</a>.
	</div>
</div>
<div id="baseGap"></div>
</div>

 

I apriciate any feedback/critisism you could provide. Thanks much in advance.

[ultrus]

So far problem 1 is solved. I made the right "columns" float: right;, and got rid of the left margins of the right columns. Now I just need to get rid of those extra gaps. Any thoughts on problem 2?

[ultrus]

Got it! It was a white space issue. Shheesh! I love IE. Problems solved.