Relative Positioning Problems in IE

**nyxynyx** · Jun 19, 2006 19:19

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!

**Tyssen** · Jun 19, 2006 19:44

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.

**nyxynyx** · Jun 19, 2006 20:00

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>

**Tyssen** · Jun 19, 2006 20:06

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.

**nyxynyx** · Jun 19, 2006 20:20

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.

**Tyssen** · Jun 19, 2006 23:42

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?

**AutisticCuckoo** · Jun 20, 2006 00:08

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.

**all4nerds** · Jun 20, 2006 00:37

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>

**nyxynyx** · Jun 20, 2006 19:54

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.

User Tag List

Thread: Relative Positioning Problems in IE

Thread Tools

Display

Relative Positioning Problems in IE

Bookmarks

Bookmarks

Posting Permissions