Solved

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

Posted on 2008-10-15
9
394 Views
Last Modified: 2012-05-05
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
Comment
Question by:davideo7
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22725912
They look exactly the same in IE6 and Firefox 2 - Mozilla browsers.
0
 

Author Comment

by:davideo7
ID: 22725976
I'm using IE 7 and FF 3.
0
 
LVL 6

Expert Comment

by:gxp071
ID: 22726132
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Expert Comment

by:gxp071
ID: 22726158
ive spotted the problem your style sheet include is outside the closing </head> tag in the php
0
 

Author Comment

by:davideo7
ID: 22726466
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
 
LVL 6

Expert Comment

by:gxp071
ID: 22726596
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
 

Author Comment

by:davideo7
ID: 22726735
That Firebug shows it outside the head tags but it is really inside the head tags, it is not outside the head tags.
0
 
LVL 6

Expert Comment

by:gxp071
ID: 22726866
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
 

Accepted Solution

by:
davideo7 earned 0 total points
ID: 22726905
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question