Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   FireFox and table border (http://www.velocityreviews.com/forums/t391281-firefox-and-table-border.html)

MG 10-07-2006 11:55 AM

FireFox and table border
 
There is a table on this page:
www.sallys.co.za/venue.htm

In IE it displays the way I expect it to. However, in FF the table border
becomes "detached" from the table. ie there is a large space between the
table and its border.

What causes this?

How do I fix it?

Thanks
MG





Rick Brandt 10-07-2006 12:56 PM

Re: FireFox and table border
 
MG wrote:
> There is a table on this page:
> www.sallys.co.za/venue.htm
>
> In IE it displays the way I expect it to. However, in FF the table
> border becomes "detached" from the table. ie there is a large space
> between the table and its border.
>
> What causes this?
>
> How do I fix it?
>
> Thanks
> MG


The 3 ems of padding you have set for the table class?
table.Std {border:gray solid 2px; padding:3em;}



Jonathan N. Little 10-07-2006 02:11 PM

Re: FireFox and table border
 
MG wrote:
> There is a table on this page:
> www.sallys.co.za/venue.htm
>
> In IE it displays the way I expect it to. However, in FF the table border
> becomes "detached" from the table. ie there is a large space between the
> table and its border.
>
> What causes this?


Not Firefox but IE, IE is improperly ignoring the padding that you put
on the table as Rick pointed out.

The table's padding should be added to the border-spacing for the
exterior table cells in the table. IE is not playing by the rules here. See:

http://www.w3.org/TR/CSS21/tables.ht...border-spacing


See for yourself, IE is not applying the 50px padding here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


<title>Demo</title>

<style type="text/css">
TABLE { border: 1px solid #f00; padding: 50px; border-spacing 15px;
background-color: #ff0;}
TD { border: 5px solid #0f0; background-color: #0ff;}
</style>

</head>
<body>

<table>
<tr><td>Alpha</td><td>Bravo</td><td>Charlie</td></tr>
<tr><td>Alpha</td><td>Bravo</td><td>Charlie</td></tr>
<tr><td>Alpha</td><td>Bravo</td><td>Charlie</td></tr>
</table>

</body>
</html>

--
Take care,

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

MG 10-07-2006 02:35 PM

Re: FireFox and table border
 
>> There is a table on this page:
>> www.sallys.co.za/venue.htm
>>
>> In IE it displays the way I expect it to. However, in FF the table
>> border becomes "detached" from the table. ie there is a large space
>> between the table and its border.
>>
>> What causes this?
>>
>> How do I fix it?
>>
>> Thanks
>> MG

>
> The 3 ems of padding you have set for the table class?
> table.Std {border:gray solid 2px; padding:3em;}



Thanks Rick
That was it.
Now I just have to try and understand why it works differently in IE and FF.

MG




All times are GMT. The time now is 10:34 PM.

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