Absolute / Relative Position Not Working

**liam77** · 08-01-2007, 03:47 AM

I am trying to position a div with absolute positioning, relative to a container div. It works when viewed in IE7, but not in Firefox 2. Firefox seems to ignore the parent or container div that has relative position set.

The page is here:

http://www.landscapeyard.com.au/index.html

The div that I need positioned is the 'promoarea' div, and the container div is 'col4'

CSS:

Code:

#col4 {
	position:relative;
	background-color:#0066FF;   /* only used for browser testing - remove when finished */
	margin:10px 0 0 370px;
}

#promoarea {
	position:absolute;
	border:1px solid gray;
	top:5px;
	width:340px;
	height:250px;
}

HTML:

Code:

<div id="col4">
    <div id="promoarea" style="background:url(images/promo_clad.jpg)">
        <div id="promoitem">
	<p>Come into our yard to see our great range of cladding from only $59 / square metre!</p>
        </div>
    </div>
</div>

I have tried changing position to relative on the promoarea div, but I get the same result..

I can fix the problem by removing position:relative from the container div, and setting the top position to 225px. But, I'd really like to know why Firefox is ignoring the container div's position setting.

Can anyone see where I've gone wrong?

Thanks in advance.

Liam.

**studiocreek** · 08-03-2007, 04:16 AM

I tried the following and it bumped the promo image down (FF2)

#promoarea {
position:absolute;
border:1px solid gray;
top:50px;
width:340px;
height:250px;
}

**jscheuer1** · 08-03-2007, 04:30 AM

Sometimes you need to specify both left and top to get an absolutely positioned element to respond as expected. Either value or both can be 0, if desired, but should still be specified.

**jscheuer1** · 08-03-2007, 04:42 AM

I looked at this a bit more. The only differences between IE and other browsers are accounted for by:

1 ) Different default margins/padding on the p element.

2 ) Different default margins/padding on the body element.

Try this:

Code:

<div id="col4">
    <div id="promoarea" style="background:url(images/promo_clad.jpg)">
        <div id="promoitem">
	<div>Come into our yard to see our great range of cladding from only $59 / square metre!</div>
        </div>
    </div>
</div>

By changing all elements to div's, the differences become much less.

**liam77** · 08-04-2007, 12:38 AM

Originally Posted by studiocreek

I tried the following and it bumped the promo image down (FF2)

#promoarea {
position:absolute;
border:1px solid gray;
top:50px;
width:340px;
height:250px;
}

Thanks for the suggestion, but it still displays differently between IE and Firefox... What I'm really looking for is a way to get them both to display the same page layout.

Liam.

**liam77** · 08-04-2007, 01:04 AM

Originally Posted by jscheuer1

Try this:

Code:

<div id="col4">
    <div id="promoarea" style="background:url(images/promo_clad.jpg)">
        <div id="promoitem">
	<div>Come into our yard to see our great range of cladding from only $59 / square metre!</div>
        </div>
    </div>
</div>

By changing all elements to div's, the differences become much less.

Thanks for the suggestion, but it doesn't fix the problem unfortunately. I set the margins and padding to 0 by default in the css with the * tag.

Code:

* {
	margin:0;
	padding:0;
}

I'm still puzzled with why Firefox seems to be getting the positioning wrong. It is ignoring the positioning set for it's containing div.

Is that how it looks to others as well? I know that Firefox is usually right, and IE wrong, but this seems to contradict it.

Liam.

**jscheuer1** · 08-04-2007, 07:30 AM

Code:

* {
	margin:0;
	padding:0;
}

The above does nothing sometimes in some browsers. This demo looks nearly identical in FF, Opera, and IE:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#col4 {
	position:relative;
	background-color:#0066FF;   /* only used for browser testing - remove when finished */
	margin:10px 0 0 370px;
}

#promoarea {
	position:absolute;
	border:1px solid gray;
	top:0px;
	width:340px;
	height:250px;
}
</style>
</head>
<body>
<div id="col4">
    <div id="promoarea" style="background:url(images/promo_clad.jpg)">
        <div id="promoitem">
	<div>Come into our yard to see our great range of cladding from only $59 / square metre!</div>
        </div>
    </div>
</div>
</body>
</html>

**liam77** · 08-06-2007, 02:00 AM

Originally Posted by jscheuer1

This demo looks nearly identical in FF, Opera, and IE:

Hmm, thanks for that. It must be something to do with other parts of the CSS or html for my page then. I'll play around with it and see which part of the code is messing it up.

Liam.

**liam77** · 08-06-2007, 02:58 AM

The problem happens when I add in my left column (col3):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#col3 {
	float:left;
	width:350px;
	margin:10px 0 0 0;
	text-align:justify;
}

#col4 {
	position:relative;
	background-color:#0066FF;   /* only used for browser testing - remove when finished */
	margin:10px 0 0 370px;
}

#promoarea {
	position:absolute;
	border:1px solid gray;
	top:0px;
	width:340px;
	height:250px;
}
</style>
</head>
<body>
<div id="col3">
        <p>Here at the Landscape Yard, you'll find all that you need to make your garden flourish.  Create an outstanding Alfresco area to suit our West Australian lifestyle with our unique products. </p>
		<br />
        <p>Whether you are planning a stunning courtyard, planting a new garden bed, installing a <a href="water.html">water feature</a> or even creating a children's play area, we've got everything that you need to create a fantastic garden.</p>
</div>
<div id="col4">
	  	<div id="promoarea" style="background:url(images/promo_clad.jpg)">
			<div id="promoitem">
				<p>Come into our yard to see our great range of cladding from only $59 / square metre!</p>
			</div>
		</div>
 </div>
</body>
</html>

When that column is added in, Firefox displays col4 incorrectly. It shifts it up the page. I just can't work out why it does it.

Liam.

**jscheuer1** · 08-06-2007, 04:18 AM

I just copied your code from your post and viewed it in Opera, FF and IE 6 & 7. Aside from the fact that IE exhibits slightly different default margins for the <p> tag, they all looked about identical.

Thread: Absolute / Relative Position Not Working

Thread Tools

Search Thread

Absolute / Relative Position Not Working

Bookmarks

Bookmarks

Posting Permissions