Reputation:
Firefox PHP Include and CSS
My problem is a bit of a specific one I feel, basically I'm having trouble with some CSS styles showing in Firefox when using a PHP include.
I have my index.php and header.php, which is included in the index file. The header file contains code from this tutorial http://www.basewebmaster.com/css/simple-css-drop-down-menu.php, which works fine when I run it in a standalone html file in Firefox, but in the header.php file it doesn't show correctly where it does in every other browser.
The site is here: http://createful.com/cleave
If you view it in any browser other than FF it should show a nice drop down menu, but in FF it really messes up, only in my instance of using an include statement for the header.php file (a static html file works perfectly).
My index.php file has this code:
<?php include("header.php"); ?>
And my header.php has the exact code from the tutorial I linked earlier in this post. My style.css also has the exact code as in the tutorial.
For comparison, here's a static version of the same code, which works perfectly in FF: http://www.createful.com/cleave/test/index.html
I'm not too sure what other information is needed to solve this, but hopefully this will be sufficient, I can provide any other information if needed though.
Thanks in advance.
EDIT - Here's the complete code for index.php and header.php
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Jon Cleave</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript">
$(document).ready(function() {
$('.open1').hide();
$('.close1').click(function() {
$('.info').slideUp('slow', function() {
// Animation complete.
});
$('.close1').hide();
$('.open1').show();
});
});
$(document).ready(function() {
$('.open1').click(function() {
$('.info').slideDown('slow', function() {
// Animation complete.
});
$('.open1').hide();
$('.close1').show();
});
});
</script>
</head>
<body>
<?php require "header.php"; ?>
<!-- BEGIN BACKGROUND PICTURES -->
<div id="loader" class="loading"></div>
<div id="bkgallery">
<ul>
<li><img src="work/work1.png" id="im1" alt=""/> </li>
<li><img src="work/triworks_arch2.jpg" id="im2" alt=""/> </li>
<li><img src="work/triworks_arch3.jpg" id="im3" alt=""/> </li>
</ul>
<div class="close1">x</div>
<div class="open1">+</div>
<div class="info">Info box 1</div>
<div class="info two">Info box 2</div>
<a href="" class="next" title="next page">next</a>
<a href="" class="prev" title="prev page">prev</a>
</div><!-- #bkgallery -->
<!-- END BACKGROUND PICTURES -->
<!-- END CONTENT -->
<!-- END FOOTER -->
</body>
Footer.php
<div id="header">
<div id="logo"><h1>Jon Cleave</h1></div>
<div id="nav">
<ul class='drop-down'>
<li class="top"><a href='#nogo'>index</a>
<ul>
<li><a href='#nogo1'>Male</a></li>
<li><a href='#nogo2'>Female</a></li>
</ul>
</li>
<li class="top"><a href='#nogo3'>case studies</a>
<ul>
<li><a href='#nogo4'>Blond</a></li>
<li><a href='#nogo5'>Brown</a></li>
<li><a href='#nogo6'>Black</a></li>
<li><a href='#nogo7'>Red</a></li>
</ul>
</li>
<li class="top"><a href='#nogo8'>cv</a>
<ul>
<li><a href='#nogo9'>Blue</a></li>
<li><a href='#nogo10'>Green</a></li>
<li><a href='#nogo11'>Brown</a></li>
<li><a href='#nogo12'>Grey</a></li>
</ul>
</li>
<li class="top"><a href='#nogo8'>contact</a>
<ul>
<li><a href='#nogo9'>Email</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- header -->
Upvotes: 2
Views: 897
Answers (2)
Reputation: 324820
Usually when this happens the problem is because your files are encoded in UTF-8 with BOM. The BOM acts as an invisible character but causes layout problems.
Most editors (beyond Notepad) allow you to encode as "UTF-8 without BOM", so you should use that option if you can.
If not, don't use UTF-8. Personally I'm still doing all my stuff in ISO-8859-1, and if I ever need a Unicode character I use an HTML entity.
Explanation of BOM - http://en.wikipedia.org/wiki/Byte_Order_Mark
Upvotes: 2
Reputation: 91792
Your problem originates in your stylesheet, lines 284 and 299:
.close1 {
position: fixed;
color: #fff;
top: 65px;
left: 30px;
display: block;
background: #444;
width: 208px;
padding: 0px 0px 1px 8px;
opacity:0.8;
z-index: 0;
background-image: url("../img/close.png);
background-repeat: repeat;
}
.open1 {
position: fixed;
color: #fff;
top: 65px;
left: 30px;
display: block;
background: #444;
width: 208px;
padding: 0px 0px 1px 8px;
opacity:0.8;
z-index: 0;
background-image: url("../img/close.png);
background-repeat: repeat;
}
Notice the opening " and the missing closing " for the background-image? That causes all declarations after that to be ignored.
Upvotes: 1