• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 336
  • Last Modified:

CSS background does not work when I include header.php

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
cnl83
Asked:
cnl83
1 Solution
 
Gurvinder Pal SinghCommented:
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
 
wwwdeveloper2Commented:
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
 
wwwdeveloper2Commented:
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
Industry Leaders: 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!

 
cnl83Author Commented:
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
 
Jagadishwor DulalBraces MediaCommented:
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
 
Jagadishwor DulalBraces MediaCommented:
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
 
wwwdeveloper2Commented:
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

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