IE7 positioning wrong, works in others

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

  1. Dane D. macrumors 6502a

    Joined:
    Apr 16, 2004
    Location:
    ohio
    #1
    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 ImageShack.us
    Safari
    [​IMG]

    Uploaded with ImageShack.us

    My CSS is:
    HTML:
    #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:
    HTML:
    <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>
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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:

    HTML:
    <!--[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
     
  3. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #3
    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

    Joined:
    Apr 16, 2004
    Location:
    ohio
    #4
    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

    Joined:
    Jun 8, 2009
    #5
    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