IE7 positioning wrong, works in others

[Dane D.]

I'm having some difficulty with positioning and IE. See image of how IE7 is positioning vs. Safari. Safari isn't perfect, but much better.
IE7

Uploaded with ImageShack.us
Safari


Uploaded with ImageShack.us

My CSS is:

#page-container {
	position:relative;
	width: 959px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#content-areab {
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: +2;
	width: 228px;
	top: 997px;
	left: 556px;
	padding: 10px;
	background-color: transparent;
	font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
	font-size: 13px;
	line-height: 127%;
	text-align: left;
}

#float1_content {
	position: absolute;
	z-index: 2;
	top: 1257px;
	left: 280px;
	width: 238px;
	height: 352px;
	background: #ffffff;
	background-image: url(images/specialty_disease_tab238x352px.jpg);
	background-repeat: no-repeat;
	font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
	font-size: 13px;
	text-align: left;
	line-height: 153%;
}

and html code is:

<div id="content-areab">
  <p><strong>Nurse practitioners</strong></p>
<p><a href="e_daly.html">Erin Daley, CNP</a><br />
  <a href="r_ferik.html">Ruth Ann Ferik, CNP</a><br />
  <a href="a_gibaldi.html">Anthony Gibaldi, CNP</a><br />
  <a href="s_hartman.html">Stephanie Hartman, CNP</a><br />
  <a href="k_parker.html">Kathryn Parker, CNP</a></p>
</div>

<div id="float1_content">
  <ul>
			<li><a href="stroke_care_prevention.html">Stroke care and prevention</a></li>
            <li><a href="tia_clinic.html">TIA Clinic</a></li>
			<li><a href="multiple_sclerosis.html">The Multiple Sclerosis Center</a></li>
			<li><a href="fast_track_clinic.html">Fast Track Neurology</a></li>
			<li><a href="spasticity.html">Spasticity Management Clinic</a></li>
            <li><a href="brain_injury_program.html">Brain Injury Program</a></li> 
			<li><a href="headache_center.html">Headache Center</a></li>
  </ul>
</div>

 

[SrWebDeveloper]

Yep, welcome to MSIE 7 Hell.

Use the MSIE CSS conditional statement in your HTML after all other stylesheets that corrects only the selectors that are wrong, example:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/path_to/ie7.css" />
/* or add selectors here */
<![endif]-->

I'm sorry I can't offer more specific CSS advice because our firewall blocks the site where you uploaded the screenshots. The one thing I did notice is in the page-container it seems you're trying to align it center. I found that "margin: 0 auto" works well across most browsers if you're aiming to do that. FYI.

-jim

 

[manueld]

can't really offer much advise as I'd want to see the whole html and css rather than just the snippet. First thing I'd suggest is if you haven't already, do a css reset. I've found that line-height is different between platforms and can cause absolute positioning issues.

Which brings me to the next point, why are you absolutely positioning these items? I don't see anything in your design that you couldn't accomplish with just simple floats.

 

[Dane D.]

can't really offer much advise as I'd want to see the whole html and css rather than just the snippet. First thing I'd suggest is if you haven't already, do a css reset. I've found that line-height is different between platforms and can cause absolute positioning issues.

Which brings me to the next point, why are you absolutely positioning these items? I don't see anything in your design that you couldn't accomplish with just simple floats.

I understand Floats, but didn't want to use them. I come from a print background and like positioning with X, Y and Z coordinates. Besides, Floats cause many headaches with IE, the client uses IE and will be maintaining once live, easier to explain than Floats.

I guess I can just say upgrade or live with it in IE. I hate this development for standards then hack for IE. I would love to insert a big sign saying, use anything but IE to see this site, But I can't, we do all their hard printed stuff.

 

[manueld]

I understand Floats, but didn't want to use them. I come from a print background and like positioning with X, Y and Z coordinates. Besides, Floats cause many headaches with IE, the client uses IE and will be maintaining once live, easier to explain than Floats.

I guess I can just say upgrade or live with it in IE. I hate this development for standards then hack for IE. I would love to insert a big sign saying, use anything but IE to see this site, But I can't, we do all their hard printed stuff.

You could still potentially have cross-browser issues even if you take IE out of the picture due to the initial line heights are set with each browser and especially how fonts are rendered by the different engines. Try doing a css reset and it should minimize issues. Look up eric myers css reset on google.