• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 406
  • Last Modified:

CSS Style Sheet renders page improperly when using PHP for the website layout

I've created the index page of a website using a CSS Style Sheet.  The page when it's in HTML looks fine but when I put it into a PHP page, it does not look fine.  When on a PHP page, there's a blank space at the top and some of the content looks odd, and some text doesn't seem to be formatted properly, almost as if the CSS page isn't being called upon properly when the page is in PHP.

Here is the page in HTML
http://www.mybiblegames.com/index.html

Here is the page in PHP
http://www.mybiblegames.com/index.php


The source code is almost exactly the same in both.  I've attached a code snippet of the CSS
@charset "utf-8";
/* CSS Document */
 
body{
	background-image:url('images/background.png');
	background-position:center;
	background-attachment:fixed;
	text-align:center;
	background-position:bottom;
	vertical-align:top;
	border:none;
	border-width:0;
	margin:0;
	padding:0;
	margin-top:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
 
.siteFrame{
	border:none;
	border-width:0;
	width:764px;
	margin:0;
	padding:0;
	text-align:left;
	margin-top:0;
	margin-left:0;
	margin-right:0;
	background-image:url('images/header.jpg');
	background-position:top;
	background-repeat:no-repeat;
	background-color:white;
}
 
 
 
/* Links */
a{
	color:#b0a310;
	font-weight:bold;
	text-decoration:underline;
}
a:hover{
	color:#7e896e;
	text-decoration:overline underline;
}
a:active{
	color:#426ae1;
	text-decoration:none;
}
a:visited{
	color:#897f0c;
}
 
 
 
/* Formated Text */
.contentSmallTitle{
	font-size:12px; 
	font-weight:bold; 
	color:white;
}
 
 
 
/* A content Box that fills the entire page horizontally */
.contentBox{
	background-image:url('images/contentBorder.png'); 
	width:754px;
}
.contentBoxInside{
	background-color:white; 
	width:740px; 
	text-align:left; 
	padding:4px;
}
.contentBoxShadow{
	width:754px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
.bibleVerse{
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	text-align:center;
}
 
 
 
/* A divided Content Box */
.divContentBox{
	width:764px;
}
.divLeftBox{
	margin: 0 0 0 5px; 
	float:left;
}
.divLeftBoxBorder{
	background-image:url('images/contentBorder.png'); 
	width:374px;
}
.divLeftBoxInside{
	background-color:white; 
	width:360px; 
	height:262px; 
	text-align:left; 
	padding:4px;
}
.divLeftBoxShadow{
	width:374px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
.divRightBox{
	margin: 0 0 0 381px;
}
.divRightBoxBorder{
	background-image:url('images/contentBorder.png'); 
	background-position:right; width:374px;
}
.divRightBoxInsideNonPadded{
	background-color:white; 
	width:368px; 
	text-align:left;
}
.divRightBoxShadow{
	width:374px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
 
 
 
/* Footer Related */
.footer{
	background-position:bottom;
	width:764px; 
	background-image:url('images/footerBackground.gif');
	background-repeat:repeat-x;
	height:38px;
	color:#cccbe7;
	font-size:12px; 
	vertical-align:bottom;
	line-height:1;
}
a.footerLinks{
	color:#e0ddc0;
	font-weight:bold;
	text-decoration:none;
}
a:hover.footerLinks{
	color:#c0c2e0;
	text-decoration:none;
}

Open in new window

0
davideo7
Asked:
davideo7
  • 4
  • 4
1 Solution
 
scrathcyboyCommented:
They look exactly the same in IE6 and Firefox 2 - Mozilla browsers.
0
 
davideo7Author Commented:
I'm using IE 7 and FF 3.
0
 
gxp071Commented:
that's freaky....  ff3 on mac white bar on the .php  safari's fine for both,  Can't see anything glaringly obvious and the fact that only ff3 has an issue,  is ie7 doing the same thing?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
gxp071Commented:
ive spotted the problem your style sheet include is outside the closing </head> tag in the php
0
 
davideo7Author Commented:
I'm looking at the source and for me it doesn't appear to be outside the </head> tag

And yes, IE7 is doing the same thing.
0
 
gxp071Commented:
Using firebug in firefox you can see that both your javascript and you css deleration are in the body tag not the head,

you can also see it by looking directly at the code,  doing the same with the .html version there in the right place inside the head .

Its the only difference i can spot,  no idea why the end result is different from the php source.  Have attached an image.
My-Bible-Games-1.jpg
0
 
davideo7Author Commented:
That Firebug shows it outside the head tags but it is really inside the head tags, it is not outside the head tags.
0
 
gxp071Commented:
ye your absolutely right they are in the right place in the source, sorry my mistake, still its strange for firebug to show them in the wrong place for the php version thats malfunctioning.  I saved the output html of both to my desktop and compared the files side by side and there almost identical except for a few comments, there as one thing that was strange though the html version had the stylesheet included twice.

Again this should have no effect, especially not the one your seeing.  Differences are shown up as red, index.html on the right, .php on the left.

ive gotta go to bed its getting late here, but i'll try and pick it up in the morning if I get a chance and you haven't figured it out by then.
index.html-vs.-index.php.jpg
0
 
davideo7Author Commented:
Thanks for your help.  I removed that extra stylesheet include from the html page and doesn't do anything different.

Most likely I wont have this figured out tomorrow so it would be great for you to check back.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now