...

View Full Version : Position:absolute inside Position:Relative



phpkid
12-01-2006, 05:21 PM
Hi guys, I posted this on the PHP forum and realized I asked in the wrong spot, Can you take a look? Thanks
PK


Hey all, this is my first post in a long time... I've been a fan of this forum and hope you can all help me again like you have before. Here's my newest dilema.

I have a code. (relative code only)


<link rel="stylesheet" href="index.css" type="text/css">
<table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<?
$result = mysql_query("SELECT * FROM coupons"); //Selects from database

if ($myrow = mysql_fetch_array($result)) {
do {
$C_ID = $myrow["C_ID"];
$name = $myrow["name"];
$desc = $myrow["desc"];
$exp = $myrow["exp"];

if ($pos == 3){?></tr><tr><? $pos = 1;}
$pos = $pos+1
?>
<td width="38%">
<div align="center" style="position:relative"><img src="images1152x864/coupon.jpg" width="293" height="233" /><br />
<div align="center" style="position:absolute; top:8px; left:6px; width: 285px;" class="header2"><? echo $name; ?></div>
<div align="left" style="position:absolute; top:55px; left:10px; width: 180px; height: 110;" class="desc"><? echo $desc; ?></div>
<div align="center" style="position:absolute; top:185px; left:25px; width: 100px; height: 30;" class="exp"><? echo 'Expires:<BR>'.$exp; ?></div>
</div>
</td>
<?
} while ($myrow = mysql_fetch_array($result));
}
?>
</tr>
</table>

This works fine in IE... However in Firefox it does not... any ideas how I can get this to work on both?

Thanks

PK

ahallicks
12-01-2006, 05:24 PM
A link?

phpkid
12-01-2006, 05:30 PM
I can't link to it, but basically, the absolute divs do not take to the relative container

harbingerOTV
12-02-2006, 01:42 AM
<div align="center" style="position:relative;border:1px solid #000;">
<div style="position:relative;margin:0 auto;background:#ccc;width:293px;">
<img src="images1152x864/coupon.jpg" width="293" height="233" /><br />
<div align="center" style="position:absolute; top:8px; left:6px; width: 285px;background:#fdd;" class="header2">1</div>
<div align="left" style="position:absolute; top:55px; left:10px; width: 180px; height: 110px;background:#36f;;" class="desc">2</div>
<div align="center" style="position:absolute; top:185px; left:25px; width: 100px; height: 30px;background:#d6c;" class="exp">3</div>
</div>
</div>


IE will center anything. wrap all that stuff in another div and give it a width and aplpy margin: 0 auto and the oother browsers will play along.

phpkid
12-02-2006, 02:32 AM
Thank you very much. I would have never thought about adding another DIV :thumbsup:

PK



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum