Solved

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

Posted on 2008-10-15
9
386 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
  • 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to count occurrences of each item in an array.

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now