Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Why is the rendering off?

Under #sections, there's a height:2em, replace that with height:100%, that should do the trick for the mis-aligned grey box in IE7. As for IE6, I do not have a machine for IE6, so I can't test it, I am guessing the padding caused the width to expand, resulting in the floating to go downwards as it cannot fit in anymore.
 
I really cant figure out the displacement for the life of me. Does any body have any ideas, its driving me crazy, I'll attache the CSS

Code: 
/* @override http://fairwayreverse.com/textpattern/css.php?s=default */

body
{
	margin: 0px;
}

blockquote, h3, p
{
	padding-right: 10px;
	padding-left: 10px;
	font-size: 0.9em;
	line-height: 1.3em;
}

blockquote
{
	margin-right: 0;
	margin-left: 14px;
}

h1, h2, h3
{
	font-weight: normal;
}

h1, h2
{
	font-family: Arial, Helvetica;
}

h1
{
	font-size: 2em;
}

h2
{
	font-size: 1em;
	font-style: italic;
}

small, .small
{
	font-size: 0.9em;
}

a
{
	text-decoration: none;
	color: #000;
	background-color: inherit;
	border-bottom: 1px #000 solid;
}

h1 a, h2 a, h3 a
{
	border: none;
}

h3 a
{
	font: 0.5em Arial Black, Times, sans-serif;
}

#sidebar-2 a, #sidebar-1 a
{
	color: #c00;
	background-color: inherit;
	border: none;
}

#sidebar-2 p, #sidebar-1 p
{
	font-size: 0.8em;
	line-height: 1.5em;
}

#sidebar-1 p
{
	text-align: right;
}

#content hr
{
	width: 66%;
	color: #ccc;
	background-color: inherit;
}

.caps
{
	font-size: 0.9em;
	letter-spacing: 0.1em;
}

img.divider
{
	text-align: center;
}

#head
{
	height: 49px;
	text-align: center;
	background-image: url(../images/2.jpg);
	background-repeat: no-repeat;
	margin-bottom: 5px;
	margin-top: 5px;
	background-position: left center;
}

#sidebar-1
{
	float: right;
	width: 261px;
	height: auto;
	background: #d8d6d6;
}

#content
{
	margin-top: 0;
	margin-bottom: 0;
	float: left;
	width: 545px;
}

#foot
{
	margin-top: 5px;
	clear: both;
	text-align: center;
}

.comments_error
{
	color: #000;
	background-color: #fff4f4;
}

ul.comments_error
{
	padding: 0.3em;
	list-style-type: circle;
	list-style-position: inside;
	border: 2px solid #fdd;
}

div#cpreview
{
	color: #000;
	background-color: #f1f1f1;
	border: 2px solid #ddd;
}

form#txpCommentInputForm td
{
	vertical-align: top;
}

#container #sidebar-1 #bar
{
	background-color: #006634;
	color: #D8D5D5;
	display: block;
	font-size: 24px;
	font-weight: bolder;
	padding-bottom: 5px;
	padding-top: 5px;
	text-align: center;
	text-transform: uppercase;
	font-family: futura;
}

#sections
{
	width: 261px;
	clear: both;
	font-family: tahoma;
	font-size: 16px;
	padding: 0;
	height: 2em;
	line-height: 2em;
	list-style: none;
}

#sections li
{
	float: left;
	text-align: left;
	white-space: nowrap;
	height: 32px;
	width: 253px;
	font-weight: bolder;
	text-transform: uppercase;
	color: #006634;
	text-indent: 50px;
}

#sections a
{
	font-weight: normal;
	display: block;
	color: #006634;
}

#sections a:hover, #sections .active a
{
	color: #D8D6D6;
}

#sections .active a, #sections .active a:hover, #sections li:hover, #sections .active a
{
	background: #006634;
}

#container #pic
{
	width: 545px;
	float: left;
	height: 249px;
}

#container
{
	width: 812px;
	margin: 0px auto auto;
	position: relative;
}
 
Guys please, anybody have any ideas. I have spent hours just trying to figure out this little thing, including recoding the site by hand (not something I particularly enjoy), any ideas, anyone. Could it be because of the CMS???

Even if you have some small Idea but doubt that it could be the reason, it would not hurt to throw it out there, and even if it does nothing, you just raised your post count and (if you dont already have it) are that much closer to getting avatar privileges
 
What CMS are you using? What did you originally code this in? It appears to me to be more complex than it needs to be. This should work:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>fairway</title>

<style type="text/css">
<!--

body {
	font-family: Arial, Helvetica, sans-serif;
}
#container {
	margin: 0 auto;
	min-width: 670px;
}

#left {
	width: 545px;
	float: left;
}

#right {
	overflow: hide;
	width: 175px;
	float: left;
	margin-left: 5px;
}


#right ul {
	list-style-type: none;
	padding: 0;
	margin: 0;	
	
}

#right li#first {
	background-color: #003300;
	color: #fff;
	font-weight: bold;
}

#right li {
	background-color: #CCCCCC;
	color: #003300;
}

#right li a {
	display: block;
	text-decoration: none;
	padding: 5px;
}

#right li a:hover  {
	text-decoration: none;
	background-color: #006600;
	color: #fff;
}

br.clear {
	clear: both;
}

-->
</style>
</head>

<body>


<div id="container">

<img src="Picture 1.png" border="0" width="173" height="59" id="title"/>
<br />

<div id="left">
<img src="3.png" border="0" width="545" height="249" />

<h3>TO REVERSE or NOT TO REVERSE?</h3>
<p>In a recent poll conducted by Prudential Financial Services, over half of homeowners eligible for a reverse mortgage said they lacked an understanding of the concept behind them. Sadly, this information gap has prevented many from being able to assess whether this increasingly popular option is appropriate for them.</p>
<h3>WHAT IS A REVERSE MORTGAGE?</h3>
<p>Most simply, a reverse mortgage is a special type of home loan that lets those holding title convert a percentage of the equity in their home into cash. The equity one has built up over years of ownership and paying down their mortgage is now paid back to them.</p>
<p>Unlike a traditional home equity loan, or 2nd mortgage, NO PAYMENT is required until the borrower(s) no longer uses the property as their prime residence. The U.S. Department of Housing and Urban Development (HUD) has established these benefits through the reverse mortgage program. Their own program (HECM) is also federally insured. (Isn’t Fannie Mae as well?) It’s very similar to selling your home, getting the money but retaining ownership. Too good to be true? Well, it’s about as close as you can get.</p>
<p>If you’re a homeowner and are over 62 years of age, you owe it yourself to learn more about reverse mortgages and how they can put years of equity building to work for you in a safe and effective way while enabling you to retain ownership of your home. Here in California, homeowners in most areas have seen their homes double and even triple in value over the past eight years, creating unprecedented amounts of equity.</p>
</div>
<div id="right">
<ul>
	<li id="first">Navigation</li>
    <li><a href="#">home</a></li>
    <li><a href="#">overview</a></li>
    <li><a href="#">pros/cons</a></li>
    <li><a href="#">faq</a></li>
    <li><a href="#">mission</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">legal</a></li>
    
</ul>
</div>

</div>
</body>
</html>
 
I'm using textpattern. This is the code that I put in.

Code: 
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><txp:page_title /></title>

	<txp:css format="link" />
</head>
<body>

<div id="container">
	<div id="head"></div>
	<div id="pic">
<txp:dru_random_image category="Page-Images" />
	 </div>
 
	<!-- left -->
  <div id="sidebar-1">
 	<div id="bar">navigation</div>
    <txp:rdt_section_menu  home="home" class="menu" id="sections" wraptag="ul"/>
  </div>

<!-- center -->
<div id="content">
	<txp:article limit="5" />
	
<txp:if_individual_article>
	  <p><txp:link_to_prev><txp:prev_title /></txp:link_to_prev> 
	  <txp:link_to_next><txp:next_title /></txp:link_to_next></p>
<txp:else />
	  <p><txp:older><txp:text item="older" /></txp:older> 
	  <txp:newer><txp:text item="newer" /></txp:newer></p>
</txp:if_individual_article>
  </div>

<!-- footer -->
  <div id="foot"> </div>
</div>

</body>
</html>
 
janitorC7 said:
I'm using textpattern. This is the code that I put in.
Click to expand...


So then if mine works you should be able to change it yourself, no? No silver platter here.

Your CSS is just overcomplicated. Like you have an empty header div for a title image, which might as well a simple <img> because there's nothing special there.

If you study css some more and yes, maybe recode it you'll be fine.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back