Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 401
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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