Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS background does not work when I include header.php

Posted on 2011-02-14
7
Medium Priority
?
328 Views
Last Modified: 2012-05-11
I have index.php that has an attached stylesheet. The css background works when its simply attached. It does not work when I include my php header.

Header.php is basically just a basic html header.

My CSS
body
{ 
background-image:url('images/bg.gif');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center; 
}

Open in new window

My Index.php
<?php include("header.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />

Open in new window


Should my header also have an attached style sheet?
0
Comment
Question by:cnl83
[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
7 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 34893906
what is in your header.php and how are you including it?

May be header.php styles are overriding the original ones in index.php
0
 
LVL 3

Expert Comment

by:wwwdeveloper2
ID: 34893945
Your header.php should be overriding your css file, since the header file is called before your css file.  The browser will listen to the last instructions it receives.

What I found interesting is that you said your hearder file was just a basic html page.  That caught my attention because you are calling it before your start your <html>

Do this.

1) make sure you header file doesn't have any <!DOCTYPE, <head> or <body> information in it.  Just make sure it has your html code you would typically see between the opening <body> and closing </body> tags.

2) In your php file, call your header file like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />

//close your head and open a body
</head>
<body>
//include your html header - make sure it doesn't head, html, or body tags since they are already declared here.  also make sure you are not calling other styles that are named the same as what you have in the css file linked above

<?php include("header.php"); ?>

//rest of your php/html page for index.php


//now close your body and html

</body>
</html>

Open in new window

0
 
LVL 3

Expert Comment

by:wwwdeveloper2
ID: 34893950
Sorry for re-post - I wish we could edit!  The first line in my previous suggestion should have read:

Your header.php should NOT be overriding your css file, since the header file is called before your css file.  The browser will listen to the last instructions it receives.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:cnl83
ID: 34894187
I tried the above and it still does not work.

http://www.actionfx.net/rootandfruit/
http://www.actionfx.net/rootandfruit/header.php

Here is header code
<center>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="98" height="259">&nbsp;</td>
    <td width="990" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/headerPNG.png">
      <!--DWLayoutTable-->
      <tr>
        <td width="990" height="259">&nbsp;</td>
        </tr>
    </table></td>
    <td width="112">&nbsp;</td>
  </tr>
  <tr>
    <td height="39">&nbsp;</td>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="990" height="39" valign="top"><div align="center"><img src="images/nav.gif" width="990" height="39" border="0" usemap="#Map" /></div></td>
        </tr>
      
    </table></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="827">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map>

Open in new window

0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34894351
Hi I think you want to get result as your first link Now here is your code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Root &amp; Fruit Juice</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include "header.php";?>
<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map></body>
</html>
<center>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1200" height="1125">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34894360
Sorry There was a mistake again like </body> and </html> have been closed two times so now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Root &amp; Fruit Juice</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include "header.php";?>
<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1200" height="1125">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 3

Accepted Solution

by:
wwwdeveloper2 earned 2000 total points
ID: 34895986
If you look at your index.php in a browser and view source,  you will see that you have multiple html head, html, and body declarations!  As my first solution mentioned, this is probably why it is failing.

Are you sure your header.php code doesn't have html, head, and body tags in it?  In the code you posted, it looks like it doesn't.  But yet when it is rendered in a browser from your example link it looks like it does?  

Maybe you forgot to ftp the new header.php to your server after you made the changes?

Here is what I'm seeing rendered in my browser from the top of your index.php page.  Notice the redundant heads, html, and doctypes?


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Root &amp; Fruit Juice</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />

</head>

<body><center>

Open in new window

0

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.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

609 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