8 replies [Last post]
dogpawstudio
Offline
Regular
Last seen: 10 years 15 weeks ago
Joined: 2008-09-12
Posts: 13
Points: 0

I have a 2 col layout with right sidebar.

http://www.dogpawstudio.com/

In IE6, the left (#mainContent) it not aligning at the top but instead getting pushed down. IE7 and other browsers appear to be fine.

I've tried tweaking the margins for #mainContent and/or width for sidebar.

Any advice greatly appreciated in advance. Thanks!

Stylesheet:

@charset "UTF-8";
/* COLORS
Header darker green & Link: 669900
Orange: EE8C00
Link Orange: E28305
Blue: 6495AC
Logo lighter green: 84AF00
Link red: 993300
*/
body  {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #333333;
	background:url(../images/dogpaw_header_bg.gif) top repeat-x;
	line-height:136%;
}
#container { 
	width: 780px;
	margin: 0 auto;
	text-align: left;
} 
#header { 
	padding: 0;
	margin:0 0 24px 0;
} 
#header h1 {
	margin: 0;
	padding: 0;
}
#sidebar1 {
	float: right;
	width: 120px;
	padding: 0 0 12px 12px;
	border-left:1px solid #E3E3E3;
	}
#sidebar1 p {
	padding-left:12px;
	margin:0;
	}
#sidebar1 h1 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#6495AC;
	margin: 0;
	font-weight: normal;
	font-size: 13px;
	padding-left: 0px;
	margin: 6px 0 3px 0;
	text-align: left;
}
#mainContent { 
	margin: 0 180px 0 0;
	padding: 0 20px;
} 
#mainContent h1 { 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:15px;
	vertical-align: bottom;
	color: #6495AC;
	text-align: left;
	width: 100%;
	border-left:12px solid #84AF00;
	border-bottom:1px solid #84AF00;
	padding:0 0 3px 6px;
	margin:24px 0;
	}
#mainContent h2 {
	color:#6495AC;
	font-size:14px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin:24px 0 0 0;
	}
#mainContent h3 {
	color:#555555;
	font-size:12px;
	}	
a:link, a:visited {
	color:#669900;
	text-decoration: none;
	font-weight: bold;
	}	
a:hover {
	color:#84AF00;
	text-decoration: underline;
	font-weight: bold;
	}
#footer { 
	padding: 3px 0;
	color:#666666;
	text-align:center;
	border-top: #E8E8E8 2px solid;
	border-bottom:#6495AC 4px solid;
	margin:36px 0 36px 0;
}
#footer p {
	margin: 0;
	padding: 0;
}
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

HTML:

<!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"><!-- InstanceBegin template="/templates/2col.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Website Design in Portland, Oregon by Dogpaw Studio LLC</title>
<meta name="description" content="Website Design in Portland, Oregon by Dogpaw Studio LLC" />
<!-- InstanceEndEditable -->
<link href="css/dogpaw_main.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
 
<body class="twoColFixRtHdr">
 
<div id="container">
  <div id="header">
    <h1><img src="images/dogpaw_header.gif" alt="Web Design by Dogpaw Studio" width="780" height="111" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="558,74,618,88" href="mailto:[email protected]" alt="Email Dogpaw Studio" title="Email Dogpaw Studio" />
<area shape="rect" coords="2,15,315,92" href="http://www.dogpawstudio.com/" alt="Dogpaw Studio" title="Dogpaw Studio" />
</map></h1>
    <!-- end #header -->
  </div>
  <div id="sidebar1">
    <h1>Web Design</h1>
    <p><a href="pages/services.html" title="Web Design Services">Services</a></p>
    <p><a href="pages/process.html" title="Web Design Process">Process</a></p>
    <p><a href="pages/why_dogpaw.html" title="Why Dogpaw?">Why Dogpaw?</a></p>
    <p><a href="pages/portfolio.html" title="Web Design Portfolio">Portfolio</a></p>
    <p><a href="pages/pricing.html" title="Web Design Pricing">Pricing</a></p>
    <p><a href="pages/consultation.html" title="Web Design Consultation">Free Consult</a></p>
    <h1>Dogpaw Studio</h1>
    <p><a href="pages/faq.html" title="FAQ">FAQ</a></p>
    <p><a href="pages/our_team.html" title="Our Team">Our Team</a></p>
    <p><a href="http://www.dogpawstudio.com/blog/" title="Dogpaw Studio Blog" target="_blank">Blog</a></p>
    <p><a href="pages/contact.html" title="Contact Us">Contact Us</a></p>
    <p><a href="http://www.dogpawstudio.com/" title="Dogpaw Studio Home Page">Home</a></p>
    <br />
 
<!--<form action="http://www.dogpawstudio.com/pages/search_results.html" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-3298895965537708:64p5qw-tg9k" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="15" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script> -->   <br />
    <!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php" onclick="addthis_url   = location.href; addthis_title = document.title; return addthis_click(this);" target="_blank"><img src="http://s9.addthis.com/button1-bm.gif" width="112" height="16" border="0" alt="Bookmark and Share" /></a> <script type="text/javascript">var addthis_pub = 'dogpaw';</script><script type="text/javascript" src="http://s9.addthis.com/js/widget.php?v=10"></script>  
<!-- AddThis Button END -->
 
    <!-- end #sidebar1 -->
  </div>
  <div id="mainContent">
    <!-- InstanceBeginEditable name="mainContent" -->
    <h1>Website Design in Portland, Oregon by Dogpaw Studio LLC</h1>
    <p>Dogpaw Studio <a href="pages/services.html">designs custom websites</a> that truly reflect each client. We work with you to thoroughly understand your online business goals and then <a href="pages/services.html">creatively customize your website</a> to ensure you fulfill them. With easy-to-navigate pages that download efficiently, your visitors will find your business professionally credible and refreshingly accessible.</p>
    <p>Read more about our<a href="pages/services.html"> web design services</a>, or schedule your initial FREE one-hour consultation by filling out our <a href="pages/consultation.html">Web Design Consultation Request Form</a> today!</p>
    <p>Dogpaw Studio can enhance your personal, corporate, or brand identity by designing custom graphics and navigation buttons to maximize the visual effectiveness of your website – and we do not stop there.</p>
    <p>We offer shopping carts complete with a web-based administration site, allowing you to manage your products at any time, and our custom-installed content management systems (CMS) allow you to manage your website content yourself!</p>
    <h1>Featured Website - shopbambootique.com</h1>
    <p><a href="http://www.shopbambootique.com/" target="_blank"><img src="images/website_design_bambootique.jpg" alt="Featured website, shopbambootique.com" width="197" height="211" hspace="24" vspace="6" border="0" align="right" /></a> </p>
    <ul>
      <li>Client: Bambootique, LLC</li>
      <li>URL: <a href="http://www.shopbambootique.com/" target="_blank">shopbambootique.com</a></li>
      <li>Project Details: ecommerce shopping cart, content management system (CMS), custom graphics</li>
    </ul>
    <p>&nbsp;</p>
    <p>This project was for another one of our socially responsible clients and involved a full content management system (CMS) and ecommerce component with a secure checkout system. CMS lets our clients update the text, graphics, and photos on their site themselves. The shopping cart lets clients manage product inventory and order fulfillment on their own, using an online administration website. <a href="pages/services.html">Visit our Services page</a> to learn more about our services, or <a href="pages/consultation.html">complete our website consultation form</a> for a free initial one-hour consultation.</p>
    <h1>Helping Our Community and Environment</h1>
    <p>Dogpaw Studio fosters our local community as a sustainable small business that supports other sustainable small businesses. We believe in strengthening the community economically as well as helping it environmentally, doing our part by using sustainable wind and solar energy, recycling, and minimizing the amount of paper we use.</p>
    <p>To show our appreciation to other local businesses that share the same values, as a proud member of ReDirect Guide and Sustainable Business Network of Portland, we offer our fellow members special rates for web design.</p>
    <p><a href="pages/pricing.html">Visit our Pricing page</a> to read about our special rates, and <a href="pages/our_team.html">visit Our Team page</a> to read more about how we do our part to help our community and environment. </p>
    <p><img src="images/membership_logos.gif" alt="Sustainable Business Network of Portland, LocalFirst, ReDirect Guide" width="500" height="75" /></p>
    <!-- InstanceEndEditable -->
  <!-- end #mainContent --></div>
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  <div id="footer">
    <p>Website Design by Dogpaw Studio in Portland, Oregon &#8226; Tel: 503.670.7035 &#8226; Email: <a href="mailto:[email protected]" title="email Dogpaw Studio">info@dogpawstudio.com</a></p>
    <!-- end #footer -->
  </div>
  <!-- end #container --></div>
 
</body>
<!-- InstanceEnd --></html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's because IE6 doesn't get

It's because IE6 doesn't get collapsing margins right. Give #mainContent 1px top padding and FF, IE7 etc will now look like IE6. Then you'll need to adjust the margins on your h1 to suit.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dogpawstudio
Offline
Regular
Last seen: 10 years 15 weeks ago
Joined: 2008-09-12
Posts: 13
Points: 0

Thanks. I'll try

Thanks. I'll try that.

Although I wonder how many people code for IE6? Is that still common sense?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Yes it is. IE6 still holds a

Yes it is. IE6 still holds a very large share of the market so there's no way you can disregard it yet.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dogpawstudio
Offline
Regular
Last seen: 10 years 15 weeks ago
Joined: 2008-09-12
Posts: 13
Points: 0

Got it. Thanks so much again

Got it. Thanks so much again for your help.

dogpawstudio
Offline
Regular
Last seen: 10 years 15 weeks ago
Joined: 2008-09-12
Posts: 13
Points: 0

Well, added 1px top padding

Well, added 1px top padding to #mainContent but IE7 and FF now just display some padding but not the extreme as in IE6.

I'm reading on some of these links you sent but can't seem to find exactly what I'm experiencing. I guess I'll keep googling...

dogpawstudio
Offline
Regular
Last seen: 10 years 15 weeks ago
Joined: 2008-09-12
Posts: 13
Points: 0

Tyssen wrote:It's because

Tyssen wrote:

It's because IE6 doesn't get collapsing margins right. Give #mainContent 1px top padding and FF, IE7 etc will now look like IE6. Then you'll need to adjust the margins on your h1 to suit.

So, it was actually something really minor. My #mainContent h1 was set to be 100% width so I changed that to 90% and now it's fine.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Yeah, that's because width:

Yeah, that's because width: 100% + padding = more than 100%. You don't actually need to specify a width, it'll automatically fill whatever space is left over for it after you deduct margins/padding/borders.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dogpawstudio
Offline
Regular
Last seen: 10 years 15 weeks ago
Joined: 2008-09-12
Posts: 13
Points: 0

Tyssen wrote:Yeah, that's

Tyssen wrote:

Yeah, that's because width: 100% + padding = more than 100%. You don't actually need to specify a width, it'll automatically fill whatever space is left over for it after you deduct margins/padding/borders.

Makes sense. Thanks so much for your help.