css trouble in mozilla

[APT]

Any ideas on using absolute positioning inside a table.

I gave a table the class:

table.contain {
position: relative;
}

Then I positioned an image and a box within the table:

img.web {
position: absolute;
top: 118px;
left : 88px;
}

..box {
position: absolute;
top: 110px;
left : 80px;
height: 211px;
width: 276;
border-width: 1px;
border-style: dashed;
border-color: #fff;
}


Here are the relevant html bits:

<table width="800" height="600" border="0" align="center" cellpadding="0"
cellspacing="0" class="contain">


<tr>
<td height="265" background="images/winter_midleft.jpg">

<div class="box"></div>
<img src="images/spacer.gif" class="web">
</div>

</td>

It works great in IE. Just how I want it to look.
But it is all over the place in mozilla.

Have a look - http://www.hooligandesigns.com/web.php

Any idea how to get this to work in both???

Thanks in advance.

 

[APT]

Hmmm...

I seemed to have figured it out. So if you visited and saw the pages match,
that's why.

Turns out Mozilla doens't like:
<table width="800" height="600" border="0" align="center" cellpadding="0"
cellspacing="0" class="contain">

I took out the align="center" and the class="contain" and the put a <div>
around the whole table to keep things in position.

Not exactly how I want it to look, but atleast it is consistent.

 

[Jonathan N. Little]

Hmmm...

I seemed to have figured it out. So if you visited and saw the pages match,
that's why.

Turns out Mozilla doens't like:
<table width="800" height="600" border="0" align="center" cellpadding="0"
cellspacing="0" class="contain">

I took out the align="center" and the class="contain" and the put a <div>
around the whole table to keep things in position.

Not exactly how I want it to look, but atleast it is consistent.

What is your intention, to center the table on the page or center the
text within the table cells? For the former:

TABLE.contain { margin-left: auto; margin-right: auto; }

for the latter:

TABLE.contain TD { text-align: center; }