17 replies [Last post]
eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

I'm trying to code a table which has 1px grey border around all the cells. The table can either be 100% wide or set to a specific width.

The problem is that this is in a strict doctype page and I can't get the tables to match up in IE and FF.

FF seems to cut off the outer border of the table (probably due to the box model ie. %100 + 1px + 1px)

Is there any way to style around this without hacks?

Thanks

-------------
Bo' Selecta

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Insufficient data for a

Insufficient data for a meaningul response.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

Hi, Here is an example of

Hi,

Here is an example of the problem. The top border is cut-off in FF and the width of the box is 501px wide - so I presume it's a box model issue. Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
table.ex, table.ex td {
	border: 1px black solid;
	border-collapse: collapse;
}
</style>
 
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table align="center"  class="ex" style="width:500px;" >
  <tr><td>1</td><td>2</td><td>2</td>
    </tr>
</table>
 
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

-------------
Bo' Selecta

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

My brain is lousy at

My brain is lousy at rendering html and I'm much too lazy to download it and stuff it in a local page. On the other hand if you gave me a link I'd at least take a look.

But you appear to be using tables for layout purposes. Whatever for?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

Hi Ed, All I'm trying to

Hi Ed,

All I'm trying to achieve is a table with 1px border around each cell and at a width that will render the same in IE of FF. It seems you can't do in strict mode without a hack, because of the box model.

The only solution I can think of is to not use borders at all, and instead use cellspacing and background colors.

Thanks for your interest and any ideas are appreciated.

-------------
Bo' Selecta

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I'm not sure what you're

I'm not sure what you're asking. The code example you gave renders a table with all 4 borders in Firefox.

eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

Hi WolfCry911 I just want

Hi WolfCry911

I just want to know the best way to code a table so that it has a 1px border around each cell (much like the way the http://csscreator.com/forum page looks)

In my version of FF (FF2) the top border is cut off and the table is now wider than 500px (I'm asuming this is a box model issue)

Also in some cases I would like to set the table to be 100% wide and still have borders, again the box model might hinder this.

Any pointers would be appreciated. This is turning into more of a challenge than I hoped. PS. I'm using a strict doctype.

-------------
Bo' Selecta

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

eskimo wrote:All I'm trying

eskimo wrote:

All I'm trying to achieve is a table with 1px border around each cell and at a width that will render the same in IE of FF. It seems you can't do in strict mode without a hack, because of the box model.

The only solution I can think of is to not use borders at all, and instead use cellspacing and background colors.

Thanks for your interest and any ideas are appreciated.

The right solution is not to use tables for layout at all. Use semantic, valid CSS for markup of content, and CSS for all styling and all layout.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

I don't think what I want

I don't think what I want can be achieved without tables.

-------------
Bo' Selecta

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

eskimo wrote:I don't think

eskimo wrote:

I don't think what I want can be achieved without tables.

Well you are virtually certain to be wrong on that. The challenge has been issued on one form or another on this forum and on others many many times and each and every time the up to date methods have risen to the task. Tables for layout are simply unnecessary.

Tables for marking up properly tabular content are of course still perfectly useful. For style and layout they are unnecessary and cause harm.

But once again, if you really want help post a link to your page.

Have you ensured that all your code is 100% valid? If not then that alone causes maybe 30% of the problems people post about here.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

Hi Ed, I've uploaded a test

Hi Ed,
I've uploaded a test page here:http://www.cribrealestate.com/test.htm

I think it may be a Firefox 2 bug as the rendering problem is not visible in Windows Safari or Chrome.

thanks
eskimo

-------------
Bo' Selecta

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

The CSS standard applies to

The CSS standard applies to VALID html only, and since you don't have that you don't really have a complaint, although fixing the html in this case doesn't fix the overall result.

You need to understand the box model. Borders, padding, and margins all add to width and height. So adding a 5px border to each cell increases the width of the table and is supposed to according to the standard. So you have a 500 pixel width plus the width of any borders, as it is supposed to be.

There's no need at all for a table for that effect - what you have is a list so you mark it up as a list. Making it display horizontally is a matter of simple CSS and if you look arond the Listamaticsite you will find out just how easy it is.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

Hi Ed, The reason for the

Hi Ed,

The reason for the invalid tags is in order to illustrate the bug.

Intially I thought it was the box-model, but on reflection I'm not so sure.

The problem is absent in chrome and safari, and the width of the table doesn't seem to match the box model.

Additionally, some of the table borders are cut off halfway (the pink div overlaps the tables bottom border, and the table's top border is cut off by the top of the page).

UL won't work in this instance as I can't be sure of the number of items in the list and I want the cells to strech across the whole of the table.

I would of thought a table with 1px borders would be easy - seems it's not the case.

Thanks

-------------
Bo' Selecta

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

eskimo wrote:The reason for

eskimo wrote:

The reason for the invalid tags is in order to illustrate the bug.

If it only occurs on invalid code then it isn't a bug. Invalid code may be rendered however the browser renders it and it is not an error. Solution - use valid code;

Quote:

UL won't work in this instance as I can't be sure of the number of items in the list and I want the cells to strech across the whole of the table.

I'm sorry, that is just nonsense, and not true to boot. And it isn't a table.

Sorry, I'm through with you on this. You are complaining that browsers don't do what the specification says they aren't supposed to do! Gimme a break...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

Quote: The reason for the

Quote:

The reason for the invalid tags is in order to illustrate the bug.

Maybe I miss phrased myself there. The bug is apparent regardless of valid markup or not. I used invalid tags so that it the bug is easier to see to the casual viewer. All those tags do is center the content and remove page borders - hardly a crime.

Quote:

I'm sorry, that is just nonsense, and not true to boot. And it isn't a table.

I'm yet to see a ul list in which the list will strech across the width of a page in the way a table made of cells will, especially when you consider that the number of list items is unknown.

I'm sorry if you are unable to help.

-------------
Bo' Selecta

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

eskimo wrote:Quote:I'm yet

eskimo wrote:

I'm yet to see a ul list in which the list will strech across the width of a page in the way a table made of cells will, especially when you consider that the number of list items is unknown.

Then you haven't looked at the standard and don't understand html or CSS. I can only suggest you educate yourself.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I just had read through the

I just had read through the specs. Needless to say table rendering can be quite complex, but it appears that FF is handling things correctly while in standards mode. What I believe you're looking for is to set the table to border-collapse: separate; and border-spacing: 0; Give it a go and report back. If that's not what you want could you show us specifically what you want so that we may be able to help with other solutions.

eskimo wrote:

Hi WolfCry911

I just want to know the best way to code a table so that it has a 1px border around each cell (much like the way the http://csscreator.com/forum page looks)

In my version of FF (FF2) the top border is cut off and the table is now wider than 500px (I'm asuming this is a box model issue)

Also in some cases I would like to set the table to be 100% wide and still have borders, again the box model might hinder this.

Any pointers would be appreciated. This is turning into more of a challenge than I hoped. PS. I'm using a strict doctype.

eskimo
eskimo's picture
Offline
Regular
Last seen: 12 years 1 week ago
Joined: 2007-04-24
Posts: 26
Points: 0

Hi Wolfcry, Thanks for your

Hi Wolfcry,

Thanks for your advice, it certainly has enabled me to make progress.

If border-collapse: separate; is set, you have to remove one of the td borders (either left or right).Additionally IE seems to ignore border-spacing, so my solution is to set cellspacing="0" directly in the HTML - not ideal but it's the best solution so far.

Here's my code in case it can help someone else

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>table test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
table.test{	
width:500px;
border-collapse: separate;
border-spacing: 0px;
border-right: 5px solid black;
}
 
table.test td {
	border-top: 5px solid black;
	border-right: none;
	border-left:  5px solid black;
	border-bottom: 5px solid black;
 
}
</style>
</head>
<body >
<table cellspacing="0"  class="test"  >
    <tr> 
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </table>
</body>
</html>

Thanks again wolfcry.

-------------
Bo' Selecta