Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   css trouble in mozilla (http://www.velocityreviews.com/forums/t164170-css-trouble-in-mozilla.html)

APT 02-08-2006 09:16 AM

css trouble in mozilla
 
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 02-08-2006 10:16 AM

Re: css trouble in mozilla
 
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.


"APT" <zendog_ak@hotmail.com> wrote in message
news:11ujdm7kqhu0b92@corp.supernews.com...
> 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.
>
>
>
>
>
>
>




Jonathan N. Little 02-08-2006 02:44 PM

Re: css trouble in mozilla
 
APT wrote:

> 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; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com


All times are GMT. The time now is 02:30 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.