Home/ Questions/Q 7911401
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T13:14:09+00:00

My problem is a bit of a specific one I feel, basically I’m having

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0