Header OK but stretches when used in PHP include.

xert posted this at 12:53 — 6th April 2009.

They have: 2 posts

Joined: Apr 2009

Hi all,

First time posting so go easy on me ! Have a site which looks fine in IE, but with Firefox header stretches downwards. Header sets out fine when viewed by itself www.sofabedgallery.co.uk/testheader.php but the problem seems to occur as a result of the doctype declaration when the header is used in the include on the page, for example www.sofabedgallery.co.uk/index.php
Any help advising where I should be looking in order to correct the problem would be gratefully appreciated.

Kind regards to all,

Chris
Webmaster

greg posted this at 14:28 — 6th April 2009.

He has: 1,581 posts

Joined: Nov 2005

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.

xert posted this at 15:56 — 6th April 2009.

They have: 2 posts

Joined: Apr 2009

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.

greg posted this at 16:20 — 6th April 2009.

He has: 1,581 posts

Joined: Nov 2005

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>

webwiz posted this at 20:21 — 6th April 2009.

He has: 629 posts

Joined: May 2007

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/

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;