私の問題は私が感じる少し特定の問題です。基本的に、PHPインクルードを使用しているときにFirefoxで表示されるいくつかのCSSスタイルに問題があります。
index.phpとheader.phpがあり、これらはインデックスファイルに含まれています。ヘッダーファイルには、このチュートリアルhttp://www.basewebmaster.com/css/simple-css-drop-down-menu.phpのコードが含まれています。これは、Firefoxのスタンドアロンhtmlファイルで実行すると正常に機能しますが、 header.phpファイルは、他のすべてのブラウザで正しく表示されません。
サイトはここにあります:http://createful.com/cleave
FF以外のブラウザーで表示すると、素敵なドロップダウンメニューが表示されますが、FFでは、header.phpファイルにincludeステートメントを使用した場合にのみ実際に混乱します(静的htmlファイルは完全に機能します) 。
私のindex.phpファイルには次のコードがあります:
<?php include("header.php"); ?>
そして、私のheader.phpには、この投稿の前半でリンクしたチュートリアルの正確なコードが含まれています。私のstyle.cssにも、チュートリアルとまったく同じコードがあります。
比較のために、同じコードの静的バージョンを示します。これはFFで完全に機能します:http ://www.createful.com/cleave/test/index.html
これを解決するために他にどのような情報が必要かはよくわかりませんが、これで十分だといいのですが、必要に応じて他の情報を提供できます。
前もって感謝します。
編集-これがindex.phpと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 -->