Firefox PHP Include and CSS

Question

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 -->

That should be include "header.php"; the parenthesis are not required. — vascowhite
– vascowhite, Commented May 9, 2012 at 14:05
It works perfectly in every other browser, just FF, and only when I do it with a PHP include. — user704119
– user704119, Commented May 9, 2012 at 14:06
For comparison, here's a static version of the same code, which works in FF: createful.com/cleave/test/index.html — user704119
– user704119, Commented May 9, 2012 at 14:08
Love the beating around the bush here. First suggest removing optional parentheses, then switching the require, neither of which has any effect, then throw the question asker a task that most people have no clue how to do... — Niet the Dark Absol
– Niet the Dark Absol, Commented May 9, 2012 at 14:24

CLo · Accepted Answer · 2012-05-09 18:21:20Z

2

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

edited May 9, 2012 at 18:21

CLo

3,7394 gold badges29 silver badges45 bronze badges

answered May 9, 2012 at 14:23

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CLo Over a year ago

Can you elaborate on what BOM is please?

Niet the Dark Absol Over a year ago

en.wikipedia.org/wiki/Byte_Order_Mark - explains it far better than I ever could.

user704119 Over a year ago

Thank you for the response. So I either use a text editor that can encode as UTF-8 without BOM, or change my charset from UTF-8 to ISO-8859-1? And this should fix this problem?

jeroen · Accepted Answer · 2012-05-09 14:38:00Z

1

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.

answered May 9, 2012 at 14:38

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

1 Comment

user704119 Over a year ago

That's it! I can't believe I didn't notice those errors. Thank you so, so much.

Collectives™ on Stack Overflow

Firefox PHP Include and CSS

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related