Solved

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

Posted on 2008-10-15
9
390 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

770 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