As far as cross-browser

webwiz — Mon, 06 Apr 2009 20:21:10 +0000

As far as cross-browser issues go, tables aren't much of a problem. I suggest you use a strict DOCTYPE if you are to use any though - a Transitional DOCTYPE puts modern browsers into "almost standards" mode that affects table cell layout. Internet Explorer does not have an "almost standards" mode, so you may have to add IE hacks that would otherwise not be necessary.

For more about DOCTYPE see http://hsivonen.iki.fi/doctype/

No problem, always glad to

greg — Mon, 06 Apr 2009 16:20:43 +0000

No problem, always glad to help.

To solve the other styling issues, as I said, another option is to use a specific ID for your particular paragraph.

EG:

#header_paragraph{
margin: 0;
text-align: center;
}
<p id="header_paragraph">Hello
</p>

Marvellous ! Thanks a

xert — Mon, 06 Apr 2009 15:56:58 +0000

Marvellous ! Thanks a million Greg - I tried adding the code to the css file and instantly corrected the issues with the header as you advised, but has created other spacing issues with the rest of the layout which I need to address.
You've put me in the right direction which was what I wanted - the site has been built and adapted using tables over the years which clearly today are not acceptable if cross browser styling is required.
Again, many thanks.

Chris.

Hi Chris, welcome to TWF I

greg — Mon, 06 Apr 2009 14:28:00 +0000

Hi Chris, welcome to TWF

I tried a new CSS rule in your stylesheet for paragraphs <p> with margin of 0 and that fixed the issue.

I "think" that when you declare a doc type it then uses default element attributes, like padding, margins etc, and a paragraph has defaults.
So, in your main stylesheet, (html.css or whatever) add a new declaration for paragraphs like this:

p {
margin: 0;
}

Or, whatever styling you want for paragraphs. Although remember that adding that attribute to paragraphs will affect ALL styling wherever you use a default <p> without additional CSS class or ID

That said, I'm not really sure why you use a paragraph in a table cell. Viewing your code I don't actually see a real reason for it. You may have a reason, but taking out the paragraph also fixes the issue.

EG:
You currently have

<td width="232" valign="top" style="border-left-color: rgb(158, 107, 1); border-right-style: none; border-right-width: medium;">
<p align="center">
<a href="index.php">
<img hspace="5" height="62" border="0" width="200" vspace="5" alt="click for home page" src="templatefiles/logo.gif"/>
</a>
</p>
</td>

Removing the <p align="center"></p> resolves that, and you can add the align="center" to the <td> instead. Or, a better way, is to use a CSS class for your table, rows and cells.

That said..
DIV versus TABLE
I would also advise you learn and use DIV's for styling and alignment such as the content you currently use tables for. It's much more flexible and once you know how to use them they offer a lot more options in my opinion.
It's an age old argument, and of course if you are familiar with tables and don't have time to learn about DIV's then perhaps continue to use tables.