Log in

View Full Version : 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:


#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:


<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:


<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
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
Try this:


<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.


* {
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
* {
margin:0;
padding:0;
}

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


<!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
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):


<!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.
liam77
08-07-2007, 03:50 AM
Finally solved it... I just needed to clear the float of the top navigation bar div, in my content div.

Thanks for all of the suggestions.