#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    215
    Rep Power
    15

    Position:relative; vs position:absolute; spaceing issues with IE


    I have having issues with IE displaying my page wrong.

    The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site)

    and the css can be found at
    http://tampabay-online.org/cetr/cetr.css

    It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top)

    Any help much appreciated.

    Code:
    .content {
    	position:relative;
    	width:320px;
    	margin-left: 125px;
    	margin-top: 20px;
    	border:1px solid black;
    	background-color:white;
    	padding:10px;
    	z-index:3;
    }
    
    #right {
    
    	position:absolute;
    	width:200px;
    	top:20px;
    	left:500px;
    	border:1px solid black;
    	background-color:white;
    	padding:10px;
    	z-index:1;
    
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    I'm glad you know that the problem is with IE.

    It's because the margin isn't collapsing in IE like it should.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    215
    Rep Power
    15
    are there any hacks that will fix this (while still being valid css/XHTML)
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You don't need a hack. Just change the margin on <body> to padding.

    Why are you using XHTML 1.1? When used correctly, it's not compatible with IE. You should use XHTML 1.0 Strict or HTML 4.01 Strict instead. Also, when you use an XHTML doctype, the xmlns attribute is required on the <html> element.

    Comments on this post

    • freejazz agrees : Thank you!
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo