SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Relative Positioning Problems in IE

    Hi, I'm having problems with relative positioning images. In FF, they look perfect. However in IE, the relatively positioned images seem to shift floats around it away... Any ideas how I can fix them in IE? I'm guessing that its because the images are too wide/tall for its containing divs...

    Also, in IE the relatively positioned images seem to be off by around 2px...

    Thnx!

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nyxynyx
    Any ideas how I can fix them in IE?
    Hmm, let's see: I've seen no code and no link to a page. I'll make you a deal: you supply one or both of those things and I'll give you the answer.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops left them out.

    I solved the first problem by making one of the img as a background. But I'm still wondering if it's possible to relatively position an image whose width is wider than the containing div's width without expanding the width of the containing div in IE.

    In my code, the reason i have <div id="headercontent"> and <div id="headercontent_bg"> is because one of it provides the faux column background which is made of 2 columns of solid colors, while the other div's background is non-repeating and provides the gradiant part of the background. I've also cut an image into 3 (.header_* classes) so its width/height wont be larger than its containing divs'.

    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    	}
    
    body {
    	font: 1em Arial, Helvetica, sans-serif;
    	}
    
    p {
    	font-size: .7em;
    	color: #7f757a;
    	}
    
    h1 {
    	font-size: 1.2em;
    	color: #8f9bd8;
    	}
    
    #mainwrap {
    	width: 987px;
    	margin: 0px auto;
    	}
    
    #headercontent {
    	height: 92px;
    	background-image: url(images/header_bg2.jpg);
    	background-repeat: repeat-x;
    	}
    
    #headercontent_bg{
    	width: 987px;
    	background-image: url(images/header_bg.jpg);
    	background-position: 0 75;
    	background-repeat: no-repeat;
    	}
    
    #midcontent {
    	width: 987px;
    	float: left;
    	background-image: url(images/bg_fadedgirl.jpg);
    	background-repeat: no-repeat;
    	}
    	
    #midcontent_solidbg {
    	width: 987px;
    	float: left;
    	background-image: url(images/bg_solid.jpg);
    	background-repeat:repeat-y;
    	}
    	
    #leftcontent {
    	width: 214px;
    	float: left;
    	/*background-color: blue;*/
    	}
    
    .header_top {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	}
    
    .header_left {
    	position: relative;
    	top: -15px;
    	left: 0px;
    	}
    
    .header_right {
    	position: relative;
    	top: -419px;
    	left: 214px;
    	}
    
    
    
    #rightcontent {
    	width: 773px;
    	float: left;
    	/*background-color: red;*?
    	}
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>aaa</title>
    	<link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
    	<div id="mainwrap">		
    	
    		<div id="headercontent">
    		<div id="headercontent_bg">		
    			<img src="images/header_top.jpg" width="315" height="77" class="header_top" />
    		</div>
    		</div>
    		
    		<div id="midcontent_solidbg">	
    		<div id="midcontent">			
    			<div id="leftcontent">
    				<img src="images/header_left.jpg" width="214" height="400" class="header_left" />
    				<img src="images/header_right.jpg" width="88" height="50" class="header_right" />	
    			</div> <!-- end leftcontent -->
    		
    			<div id="rightcontent">
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<h1>Welcome to</h1>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>a</p>
    				<p>a</p>
    				<p>a</p>
    <p>a</p>
    				<p>a</p>
    				<p>a</p>
    				<p>a</p>
    				<p>a</p>
    				<p>a</p>
    			</div> <!-- end rightcontent -->		
    		</div> <!-- end midcontent -->
    		</div> <!-- end midcontent_solidbg -->
    	
    	</div> <!-- end mainwrap -->
    </body>
    </html>

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's pretty hard to tell what's s'posed to be happening without seeing the images but two things I can tell you:
    1. you should probably be using background-images instead of images in your HTML.
    2. you'd be better using margins and floats than position: relative.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a link to it if it helps... At the top left corner of the page, in IE the circular border seems jagged while in FF its smooth.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See, now I wouldn't have put it together like that. Rather than spliting the red logo thing into two, why not just layer it over the top of the background as a single piece?

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nyxynyx
    But I'm still wondering if it's possible to relatively position an image whose width is wider than the containing div's width without expanding the width of the containing div in IE.
    Maybe by using overflow:hidden on the container.

    A relatively positioned element still occupies the same space it would have occupied if positioned statically. You just move the rendered box.
    Birnam wood is come to Dunsinane

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You use an old Table cut for the images ?
    The design only works if not heigher then 550px of background image ?

    Floats are not cleared for FF NS Moz OP

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>aaa</title>
    	<style type="text/css">
    	*{margin:0;padding:0;}
    
    	body {font:1em Arial, Helvetica, sans-serif;}
    	
    	head+/**/body .fc:after{
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    	/* mac hide \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/* End hide */
    
    	p{
    	font-size: .7em;
    	color: #7f757a;
    	}
    
    	h2{
    	font-size: 1.2em;
    	color: #8f9bd8;
    	}
    
    	#mainwrap{
    	width:987px;
    	margin: 0px auto;
    	}
    
    	#headercontent{
    	height:77px;
    	background: url(images/header_bg2.jpg) repeat-x;
    	}
    
    	#headercontent-bg{background: url(images/header_bg.jpg) no-repeat 315px 0;}
    
    	#midcontent{background: url(images/bg_fadedgirl.jpg) no-repeat 0 10px;}
    	* html #midcontent-solidbg{height:1%;}
    	
    	#midcontent-solidbg{background:#fcedf4 url(images/header_bg2.jpg) repeat-x 0 -77px;}
    	
    	#leftcontent {
    	width:214px;
    	float:left;
    	background:url(images/header_left.jpg) no-repeat;
    	/*background-color: blue;*/
    	}
    
    	.header-top {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	}
    
    	.header-left {
    	position: relative;
    	top: -15px;
    	left: 0px;
    	}
    
    	.header-right {
    	position: relative;
    	top: -419px;
    	left: 214px;
    	}
    
    	#rightcontent{
    	width:773px;
    	float:left;
    	background: url(images/header_right.jpg) no-repeat;
    	/*background-color: red;*/
    	}
    	#rightcontent h2{padding:40px 0 0 10px;}
    	#rightcontent p{padding:5px 0 0 10px;}
    	</style>
    </head>
    <body>
    
    <div id="mainwrap">
    	
    <div id="headercontent">
    <h1 id="headercontent-bg"><img src="images/header_top.jpg" width="315" height="77" class="header_top" alt="" /></h1>
    </div>
    		
    		<div id="midcontent-solidbg">	
    		<div id="midcontent" class="fc">			
    		<div id="leftcontent"><br /><br /><br /><br /><br /><br /><br /></div> <!-- end leftcontent -->
    		
    			<div id="rightcontent">
    				<h2>Welcome to</h2>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    				<p>asdasdddddddddddddddddddddddddddddddddddddddddddd</p>
    			</div> <!-- end rightcontent -->		
    		</div> <!-- end midcontent -->
    		</div> <!-- end midcontent_solidbg -->
    	
    	</div> <!-- end mainwrap -->
    	
    </body>
    </html>

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thnx for the replies, I've got it working now by using background images. I tried not splitting the images and using overflow:hidden but in FF part of the image got cut off when it's beyond its containing div.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •