Page not displayin correctly in IE

Hi,

I have a two-column page that displays well in Firefox, Safari, and Opera, but in IE 6 and IE7 the left-hand column is pushed down slightly more than the right-hand column and I cannot get the top of each column to align with one another. I'm wondering if someone can point out what in my code is causing the disparity between the browsers.

Thanks!

HTML

<?php $pagename="Eyelash Extensions";
$description="Skin Care treatments at the NYC office of Ronni Kolotkin, Inc. ";
$keywords="esthetician in NYC, facial, massage, exfoliation, skin care treatment, back treatment, anti-aging facial, enzyme peel, collagen eye treatment, hand treatment";
 include ('top-noflash.php');?><br/>
<div id="c">
<div class="columnLeftEyelash"> 
<!--<img class="headerImg" src="images/headers/eyelash_extensions.gif" alt="Ronni Kolotkin Eyelash Extensions" longdesc="images/headers/eyelash_extensions.gif" />-->
Eyelash extensions are a fast, easy way to significantly improve the look and youthfulness of your eyes and face.  After one treatment, you will have a complete set of beautiful, natural-looking, lush eyelashes that are indistinguishable from your own.<br />
<br />
<img class="paddingImg" src="images/brunette_lashes.jpg" height="546" width="390" alt="Ronni Kolotkin Eyelash Extension" longdesc="images/eyelash_girls.jpg" />
<h2>How Extensions Work</h2>
Lash extensions are hair-like fibers that are bonded, lash-by-lash, onto your own individual lashes, near the base.  This synthetic hair never touches skin or impedes the growth of the lash to which it is attached.  The adhesive is formaldehyde-free and safe for use near the eye.<br />
<br />
<h2>Semi-Permanent</h2>
The extensions we use are semi-permanent but with regular maintenance you’ll have your new set of lash extensions forever!  Each individual lash lasts about one to three months, depending on personal factors.  Once your initial appointment is over, you return to us for replenishment and spot-fixes.  Your aesthetician will advise you as to how best to care for your lashes to maximize their lifespan.   <br /><br />
</div> <!-- columnRightSkin -->

<div class="columnRightEyelash">
<h2 style="text-align:left;">We use only NovaLashâ„¢ Lash Extensions and Adhesive</h2>
NovaLash â„¢ is the only line of eyelash extension products featuring a USP (US Pharmaceutical Grade), formaldehyde-free, FDA and AEWCA approved adhesive.  And the eyelash remover is acetone-free.  No other line of products has received these approvals.<br /><br />

<h2>More to Know</h2>

Lash extensions need not be maintained permanently. They are perfect treats for important events: vacations, weddings, proms, photo sessions.  Any time you want some extra firepower.  

Our aestheticians can easily tailor your lash extensions to your own preferences.   We have both straight and curly extensions available and can make your lashes as subtle or as dramatic as you wish.   

You will be given thorough instructions from your aesthetician about how to care for and maintain your new lashes. You may safely wear them swimming.<br /><br />


<h2>The Cult of RKI Lashes!</h2>

We’ve already got some fanatical lash extensions clients, including our own staffers.  Here are some typical quotes:<br /><br />

“People stop me in the subway and ask me what mascara I use.”<br /><br />

“I wish I’d done this years ago.  I feel great.”<br /><br />

“My friends tell me how youthful I look these days.  They want to know what’s different…!”<br /><br />

“Just like with electrolysis, it’s so great to have something <em>taken care of</em>.”<br /><br />

<h2>Pricing</h2>
<table width="391" border="0" cellspacing="5" cellpadding="5" class="priceTable">
  <tr>
    <td>Initial Session:</td>
    <td align="right"><span class="price">$375</span></td>
  </tr>
  <tr>
    <td ><span class="price">Maintenance</span></td>
    <td></td>
  </tr>
  <tr>
    <td >2 weeks since last appointment:</td>
    <td align="right"><span class="price">$75-$100</span></td>
  </tr>
  <tr>
    <td >3 – 4 weeks since last appointment:</td>
    <td align="right"><span class="price">$125</span></td>
  </tr>
   <tr>
    <td >4 - 5 weeks since last appointment:</td>
    <td align="right"><span class="price">$150</span></td>
  </tr>
    <tr>
    <td >5 - 6 weeks since last appointment:</td>
    <td align="right"><span class="price">$200</span></td>
  </tr>
    <tr>
    <td >5 - 6 weeks since last appointment:</td>
    <td align="right"><span class="price">$200</span></td>
  </tr>
   <td >safe eyelash removal:</td>
    <td align="right"><span class="price">$100</span></td>
  </tr>
    <tr>
    <td colspan="2" ><span class="price">*at 6+ weeks, you must schedule an Initial Session</span></td>
  </tr>  
</table><br /><br />
    

  </div><!-- secondColumnSkin --><br />
 
</div>
<?php include ('bottom.php');?></td></tr></table>
<!-- start google analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7720204-1");
pageTracker._trackPageview();
} catch(err) {}</script>
  <!-- end google analytics -->
</BODY>
</HTML>

HTML:

CSS

html, body {
		height: 100%;
		height: auto;
	}
	
body {

		background-color: #666666; 
		color: #FFFFFF; 
		font-family: Helvetica, Arial, sans-serif;  
		margin: 0; 
		padding: 0;}

#c {
		width: 800px; 
		/* margin-bottom: 10px;  */
		margin-top: 10px;
		font-size: 14px;
		line-height: 18px;
		letter-spacing: .5px;
	

}


/* HEADERS */

h1 {
		line-height:2px; 
		letter-spacing: 1px; 
		font-size: 12pt; 
		color: #FFFFCC; 
		font-weight: bold; 
		margin-bottom: 10px;

}

h2 {

		font-size:11pt; 
		color: #FFFFCC; 
		font-weight: normal; 
		margin-bottom: 5px; 

}

h3 {
		font-size: 9pt; 
		color: #FFFFFF;

}


h4 {

		font-size:11pt;
		color: #FFFFCC; 
		margin-top: -3px;}

h5 {

		margin-top:-3px; 
		margin-bottom: 13px; 
		text-transform: uppercase;
		font-size:11pt; 
		color: #FFFFCC; 
		font-weight: normal; 

}

a {color: #FFFFCC; font-size: 10pt; text-decoration: none;}

a:hover {color: #FFFFFF; font-size: 10pt; text-decoration:underline;}

#f {height:350px; width:800px; border-top: 0px #FFFFCC solid; border-bottom: 0px #FFFFCC solid;}
#t {padding-bottom: 8px; padding-top: 10px;}




#b {font-size: 8pt; width:800px; border-top: 2px #FFFFCC solid; border-bottom: 2px #FFFFCC solid; padding-top: 4px; padding-bottom: 4px; height: 30px; bottom:0 !important; clear:both;}

#b a {font-size: 8pt; color: #FFFFCC;}
#b a:hover {font-size: 8pt; color: white; text-decoration: underline;}

/* NAV BAR */

#m {

	
		width:800px;
		border-top: 2px #FFFFCC solid; 
		border-bottom: 2px #FFFFCC solid; 
		padding-top: 4px; 
		padding-bottom: 4px;
		

}

#m ul  { 
		margin-left: 0;
		padding-left: 0;
		display: inline;
		

} 

#m ul li {

		list-style: none;
		display: inline;
		padding-right: 9px;

	}

#m li a {font-size: 11px; color: #FFFFCC;  text-decoration: none;}
#m li a:hover {font-size: 11px; color: white;  text-decoration:underline;}
		
/* END NAV BAR */

/* IMAGE STYLES */		

.imgBorder {
	border: 1px solid #FFFFCC;
	
}

.paddingImg {
	margin-bottom: 10px;
	border: 1px solid #FFFFCC;

}


.headerImg {
	padding-bottom: 10px;
	display:block;

}



/* ASK RONNI */

#ask_ronni {

		float: left;
		padding-left: none;  
		margin-top: 15px;
		margin-bottom: 15px;

}

.question_answer_letter {

color: #FFFFCC; font-weight: bold;

}

.ask_ronni {

		font-size: 20px;
		font-style: normal;
		font-weight: bold;
		margin-top: 20px;

}

.content2 {
	font-size: 12px;

}

.question_styling {
	font-weight: bold;
}

/* END ASK RONNI */

/* PRESS */

.AsSeenIn_images_TEXT {

color: #FFFFFF; 
font-family: georgia; 
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;

}

/* CONTACT */

#contact_info {

float: left;
margin-left: none;
width: 355px; 
margin-top: 8px;
margin-bottom: 15px;


}

#contact_form {
	float: right;
	width: 305px;
	padding-right: 15px;
	margin-top: 17px;
}

#sitemap {

	padding-top: 20px;
}

.content2 {
	font-size: 12px;
	margin-top: 5px;

}

.contact_text {
	font-size: 14px;
	line-height: 22px;
}


.contact_text {

	line-height: 19px;
}

.yellow_text {
	font-size:10pt; 
	color: #FFFFCC;
	font-weight: bold;
}

/* END CONTACT */

/* TESTIMONIALS */

#testimonials {

width: 305px; 
margin-top: 15px;
float:left; 
width: 450px;
margin-left: none;
margin-bottom: 15px;


}

#hair_removal {

float: left; 
width: 305px; 
margin-left: 15px;
margin-top: 20px;
margin-bottom: 15px;


}


/* END TESTIMONIALS */

#press_text {

float: left;
margin-left: none;
width: 355px;
margin-top: 15px; 
margin-bottom: 15px;


}

.question_styling {
	font-weight: bold;
}

/* SKINCARE */

.columnRightSkin {

float: left; 
width: 391px; 
margin-left: 15px; 
padding-top: 13px; 
text-align:justify

}

.columnLeftSkin {
float:left; 
width: 390px;
text-align:justify;
padding-top: 27px; 


}

/* END SKINCARE */

/* EYELASH EXTENSIONS */

.columnLeftEyelash {

float:left; 
width: 390px;
text-align:justify;
padding-top: 33px;


}

.columnRightEyelash {

float: left; 
width: 391px; 
margin-left: 15px; 
padding-top: 20px; 
text-align:justify;
font-weight: normal;

}

.columnRightPrice {

float: left; 
width: 390px; 
margin-left: 15px;

}

.columnLeftPrice {

float:left; 
width: 305px;

}

.priceTable {

border: solid 1px #FFFFCC;
font-weight: normal;
font-size: 14px;


}


.price {

		font-style: italic;
		

}


.tableBorderLeft {

		border-bottom: solid 1px #FFFFCC;
		border-right: solid 1px #FFFFCC;

}


.tableBorderRight {

		border-bottom: solid 1px #FFFFCC;
		border-left: none;

}

.borderBottom {

border-bottom: 1px solid #FFFFFF;

}

/* END EYELASH EXTENSIONS */

/* Link Styles */
.AsSeenIn_images_sm{
	margin-bottom:14px;
	border: 1px solid #007790;
}

.AsSeenIn_images_sm:hover { 
	border: 1px solid #FFFFCC;
}

.AsSeenIn_IMAGESSS{
	margin-bottom:20px;
	border: 1px solid #FFFFFF;
}

.AsSeenIn_IMAGESSS:hover{
	margin-bottom:20px;
	border: 1px solid #FFFFCC;
}

HTML:

 

If you can show a url i can tell you what the problem is. Guessing from code is bit difficult.

 

Hi Its better to see your live URL. Then we can see.. its not good to post your codes alone here, I think.

 

Hi,

Here is the URL:
http://www.ronnikolotkin.com/testing_current/eyelash_extensions.php
(i can't yet paste live links on the forum)

Actually, the page also displays strangely in Opera (ie the top of the columns are uneven).

Thanks for your help!

 

You will never get IE to attempt to perform like other more modern browsers without a proper doctype. Put this on your first line:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

 

wow, i did not notice that the person who built this site did not include a doc type!

I thought that this was the standard doc type:

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

?? Why use a strict doc type, as you suggested?

Thanks!

 

New web pages have no need for the transitional doctype. It exists to allow validation of deprecated markup in older pages. No one should ever use deprecated markup.