IE7 positioning wrong, works in others

Discussion in 'Web Design and Development' started by Dane D., Oct 14, 2010.

  1. Dane D. macrumors 6502a

    Apr 16, 2004
    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 [​IMG]

    Uploaded with

    Uploaded with

    My CSS is:
    #page-container {
    	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 id="float1_content">
    			<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>
  2. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    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 */
    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.

  3. manueld macrumors 6502

    Jun 8, 2009
    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.
  4. Dane D. thread starter macrumors 6502a

    Apr 16, 2004
    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.
  5. manueld macrumors 6502

    Jun 8, 2009
    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.

Share This Page