Small php table

[Oak]

My table displays correctly in IE and not in FF?


http://www.capoeiracanal.co.uk/index-classes.php

[Oak]

Should I have posted this in php section?

[Ed]

Yes.

Moved to PHP Forum.

[Oak]

Any ideas?

[Marc]

What table are you on about? I don't see any differences!

[Oak]

Top image is FF

Bottom is IE7

[kerrsmith]

I have seen this a few times before and have fixed it by adding cellspacing to the table tag in the HTML code and border-spacing to the CSS code as shown below:

<table class="indexpage" cellspacing="5px">

.indexpage {
border-spacing: 5px;
}

Doing this seems to make it work on all browsers.

[Oak]

before

HTML: Select all

<br /><table id="timetable1" border="0" cellspacing="2" width="445px">

after

HTML: Select all

<table class="indexpage" cellspacing="5px" id="timetable1" border="0" width="445px">

Still only works in IE not in FF!

[kerrsmith]

You now have an id and a class in your HTML table tag, you need to have one or the other. Try removing class="indexpage" from the table tag and adding border-spacing: 5px; to the timetable1 class in your CSS code.

[Jack Franklin]

Originally Posted by kerrsmith

You now have an id and a class in your HTML table tag, you need to have one or the other. Try removing class="indexpage" from the table tag and adding border-spacing: 5px; to the timetable1 class in your CSS code.

1 element with an id and class is perfectly acceptable.

[kerrsmith]

Yes, although you can use both id and class within an single element in this particular case it is not really necessary - it makes sense just to add the required code to the id already created in the CSS code - if only to keep the code neat and tidy.

[Oak]

Try removing class="indexpage" from the table tag and adding border-spacing: 5px; to the timetable1 class in your CSS code.

Still not working.

HTML: Select all

<table id="timetable1" cellspacing="2" width="445px">

#timetable1 th
{
background: #ccc;
padding: 5px;
text-align: left;
border-spacing: 5px;
}
#timetable1 td
{
border-spacing: 5px;
background: #E2E4E7;
padding: 5px;
text-align: left;
}

[kerrsmith]

You need to apply border-spacing to the whole table not just the th and td tags. Try adding the following to your CSS code:

#timetable1
{
border-spacing: 5px;
}

[Oak]

Nope, still no good.

[Rob]

ok, back to basics here:-

Define you table as such:-

Code: Select all

<table cellpadding="0" cellspacing="0" id="timetable1">

This HAS TO work in all browsers because it's basic HTML. Not all browsers have the same default cellpadding and cellspacing behaviour so it's best to explicitly define it.

If you need padding in cells and spacing between them, then define it in the CSS.

[Oak]

Rob, This still did not create any spacing.

HTML: Select all

<table cellpadding="0" cellspacing="0" id="timetable1" >

#timetable1 th
{
background: #ccc;
padding: 5px;
text-align: left;
border-spacing: 5px;
cell-spacing: 2px;
width:445px
}
#timetable1 td
{
border-spacing: 5px;
background: #E2E4E7;
padding: 5px;
text-align: left;
cell-spacing: 2px;
width:445px
}
#timetable1
{
border-spacing: 5px;
cell-spacing: 2px;
width:445px }

[masonbarge]

To me, this is an HTML or CSS question Luckily, as everyone knows, PHP geeks are top experts in every field, including dating and auto repair.

The solution here is simple: Don't use an html table. All you have here is a large box with two styles of a smaller box inside. The CSS is so basic I won't even bother to do sample code.

RANT WARNING!

HTML tables are on the way out. They usually don't save time in the long run during coding, they add processing overhead, and as your problem shows, browser implementation is quirky and even horrific. Improving table rendering is a very low priority for the besieged browser industry so don't expect it to improve much.

There might be reasons to use them in the short run: better valign support, features you already know and don't want to take the time to reproduce in CSS (like colgroup), or an existing import function from another code source might be three. But most likely these will slowly disappear.

Now, if we could just code form elements.

[Rob]

Mason, oak is trying to display tabular data. The need for a table in this instance is not only self evident, but highly reccomended -especially when done properly with table headers.


Oak, are you saying you actually want spacing between cells?

[Rob]

You were using WAY to much code....

Try:---

HTML: Select all

<table cellpadding="5" cellspacing="5" id="timetable1" >

Code: Select all

#timetable1 th
{
background: #ccc;
}
#timetable1 td
{
background: #E2E4E7;
text-align: left;
}
#timetable1
{
width:445px }

[Oak]

The need for a table in this instance is not only self evident, but highly reccomended -especially when done properly with table headers.

Sorry but am I using table headers?

Oak, are you saying you actually want spacing between cells?

Yes

You were using WAY to much code.... try this.

Thanks.. FF still does not show spacing.