CSS #frame height and PHP

SCDWB · #1 (**permalink**) May 11th, 2007, 22:27

Hello I new here and know very little about css so sorry if I state the obvious. I was wondering if anyone could help?

My website runs a php script. All pages bring in a header.php and footer.php file to create the layout of the website.

The header.php has a frame div which is set at 780px wide and is centred with a background. This is the code in my css for this:

#frame {
width:780px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
border: 1px solid #000000;
background:white;
}

and in my header.php this code is associated with #frame:

<div id="frame">
<body bgcolor=white

All this achieves the results I want in IE as shown below: (showing the footer at bottom of website as this is where problem is in other browsers).

*image removed*

The footers great all lines up, no spills and white backgroud in frame.

However, in other browsers such as Fireworks, sarafi, and Netscape. This displays:

*image removed*

The left text spills out and the footer image moves to the right because of this text. It might be worth pointing out that the orange box with curved edges just above the footer image, is the php content. Whereas the text on the left which spills out is in the header.php.

Has anyone got any code to fix this problem? As I say works great in IE and need it to be like that in all browsers.

Thanks in advance. Steve

Lchad · #2 (**permalink**) May 11th, 2007, 22:39

Try either of these fixes and see if it works.

To the css footer add

Code: Select all

clear: both;

or if that doesn't work... right above the footer code in the html add this

Code: Select all

<div class"clear"></div>

then add this to your css

Code: Select all

.clear {
	height:1px;
	margin:0 0 -1px 0;
	clear:both;
	overflow:hidden;
}

SCDWB · #3 (**permalink**) May 11th, 2007, 23:20

Thanks for your reply. Ive tried what you said I was hoping but it hasn't worked

. The only effect it had was the main content was placed below the header contents on IE. So it was below the left hand text whereas it should be to the right of it?!

I'll keep looking, thanks for your help.

Lchad · #4 (**permalink**) May 12th, 2007, 00:18

darn.....Do you have a link?

SCDWB · #5 (**permalink**) May 12th, 2007, 14:38

Hey, what link are you after? the webpage im talking about is yourstudenthouse(.)co(.)uk(/)mail.php
Or are you after the css file?

Ive solved a little of the problem in netscape by inserting

OVERFLOW: hidden

in the #frame { of css.

The frame box ends at the bottom where it should, no overflowing of the left text anymore.

But the footer is still below the orange square box, which is the mail.php content. Instead of below the header.php content, which is the left text.

Im thinking it isnt a css issue but a php problem now. As in each php page at the bottom there is code saying

include ( PATH . '/templates/' . $cookie_template . '/footer.php' );

which inserts the footer on each page. This is maybe why it is going only below the php pages content.

Its just strange how IE is placing this footer at the bottom of everything like it should, and other browsers aren't.

very frustrating...

SCDWB · #6 (**permalink**) May 12th, 2007, 22:19

Actually overflow: hidden caused other problems on other pages.

But it looks like ive solved footer problem with min-height: property in the css under #frame.

The only other problem ive got now the page content in netscape hugs the left of the frame like this:

*image removed*

So the content moves into the white space instead of being aligned vertically to the rest of the content. It works fine in IE. Do you know any code to solve this? float: property doesnt work. Im not sure what to do. Thanks

Steve

Lchad · #7 (**permalink**) May 12th, 2007, 22:45

I ran one of pages through the validator and it came up with 81 errors.
http://validator.w3.org/check?uri=ht...%2Fcompare.php

Most of them were no biggie but it did find that some of the align="center" is spelled "centre". That might be part of the problem. Take a look through these errors and see if that resolves your issue.

You also have some code that is questionable here:

Quote:

But I only see a closing </div> but no opening one. I'm wondering if there is a missing open or close div.

You have the same problem in FF... not just Netscape.

I'm just guessing but the box above is situated fine so it's being spaced correctly because of the left column box. The one below moves to the left since there is nothing in the way. It doesn't make sense to me because it appears that you have the main div set up correctly. The tables all sit inside the main div. hmmmmm... check to make sure you closed the main div ok? Sorry I can't be more helpful.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
any key press to go to next frame	forry	Flash & Multimedia Forum	2	Feb 25th, 2008 13:51
EASY PEASY Displaying frame address in another frame question	molotov	JavaScript Forum	3	Nov 20th, 2007 17:29
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
frames or not to frame	simonb	Web Page Design	6	Jan 25th, 2007 15:36
<frame>	Fox	Web Page Design	1	Aug 26th, 2005 20:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS #frame height and PHP