この割り当て (javascript しか使用できない場合) では、私のページは Safari と Chrome では正常に表示されますが、Firefox では表示されません。Firefox では、div "bookselection" がヘッダーの右側に表示されます。理由はありますか？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Armchair Bookstore</title>
<meta name="description" content="Armchair bookstore, local and online store">
<meta name="keywords" content="books, special orders, children books">
<link href="css/armchair.css" rel="stylesheet">
</head>
<body>
<!-- wrapper section starts -->
<div id="wrapper">
<!-- header section starts -->
<div id="header">
<img src="images/header.jpg" alt="Armchair Bookstore Logo" width="975" height="230" class="floatcenter">
</div>
<!-- header section ends -->
<!-- menu section starts -->
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="newrelease.html" id="current" class="first">New Releases</a></li>
<li><a href="placeholder.html">Special Selection</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="placeholder.html">On Sale</a></li>
</ul>
</div>
<!-- menu section ends -->
<!--Text starts -->
<div id="content">
</div>
<img src="images/viewcart.jpg" alt="" width="130" height="59" class="floatright" />
<div id="bookselection">
<script type="text/javascript" src="js/armchair.js"></script>
</div>
<!-- Text ends -->
<!-- footer section starts -->
<div id="footer">
<p class="bottom">Copyright © 2012 oo Design | All Rights Reserved | <a href="#">Terms and Conditions</a></p>
</div>
<!-- foot section ends -->
<!-- wrapper section starts -->
</div>
</body>
</html>
これが私の.jsファイルです。javascript のコースを開始したばかりなので、javascript 以外のプログラミング コードは使用できません。
var str = "<table>";
var folder ="images/";
// Book Title array
var title = new Array();
title[0] = "The Innocent";
title[1] = "Zero Day";
title[2] = "The Bat";
title[3] = "Mad River";
title[4] = "Low Pressure";
title[5] = "Zagreb Cowboy";
// Book author array
var author = new Array();
author[0] = "Marc Webb";
author[1] = "Joss Whedon";
author[2] = "Chris Nolan";
author[3] = "Joe Johnson";
author[4] = "Jon Favreau";
author[5] = "Martin Campbell";
// Release date array
var release = new Array();
release[0] = "April 2012";
release[1] = "August 2011";
release[2] = "October 2012";
release[3] = "October 2012";
release[4] = "September 2012";
release[5] = "October 2012";
// Book Cover array
var cover = new Array();
cover[0] = "theinnocent.jpg";
cover[1] = "zeroday.jpg";
cover[2] = "thebat.jpg";
cover[3] = "madriver.jpg";
cover[4] = "lowpressure.jpg";
cover[5] = "zagrebcowboy.jpg";
// Book Price array
var price = new Array();
price[0] = "18.18";
price[1] = "9.50";
price[2] = "15.64";
price[3] = "18.50";
price[4] = "15.00";
price[5] = "14.56";
// Book plot array
var plot = new Array();
plot[0] = "It begins with a hit gone wrong. Robie is dispatched to eliminate a target unusually close to home in Washington, D.C. But something about this mission doesn't seem right to Robie, and he does the unthinkable. He refuses to kill. Now, Robie becomes a target himself and must escape from his own people. ";
plot[1] = "John Puller is a combat veteran and the best military investigator in the U.S. Army's Criminal Investigation Division. His father was an Army fighting legend, and his brother is serving a life sentence for treason in a federal military prison. Puller has an indomitable spirit and an unstoppable drive to find the truth." ;
plot[2] = "Before Harry took on the neo-Nazi gangs of Oslo, before he met Rakel, before The Snowman tried to take everything he held dear, he went to Australia. Harry Hole is sent to Sydney to investigate the murder of Inger Holter, a young Norwegian girl, who was working in a bar. Initially sidelined as an outsider, Harry becomes central to the Australian police investigation when they start to notice a number of unsolved rape and murder cases around the country.";
plot[3] = "The first person they killed was a highway patrolman. The second was a woman during a robbery. Then, hell, why not keep on going? As their crime spree cuts a swath through rural Minnesota, some of it captured on the killers'cell phones and sent to a local television station.";
plot[4] = "Bellamy Lyston was only 12 years old when her older sister Susan was killed on a stormy Memorial Day. Bellamy's fear of storms is a legacy of the tornado that destroyed the crime scene along with her memory of what really happened during the day's most devastating moments.";
plot[5] = "Yugoslavia, 1991. The State is crumbling, and in the midst of the political chaos secret policeman Marko della Torre has been working both sides of the law, but somewhere along the way he's crossed the line.";
for (var i = 0; i < cover.length; i++)
{
str += "<tr><td><img src='" + folder + cover[i] + "' width='75' height='115'></td>";
str += "<td width='30%'><h3>" + title[i] + "<h5>Buy Now" + "</h3><br />Price: $" + price[i] + "<br />Author: " + author[i] + "<br />Date of release: " + release[i] + "</td>";
str += "<td><p>" + plot[i] + "</p></td></tr>";
}
str += "</table>";
var elem = document.getElementById("bookselection");
elem.innerHTML = str;
ここに.cssがあります
/*--------------Body-----------------*/
html {background-color: #fff}
body {
color: #000; background: #fff;
font-family: "Helvetica Neue",helvetica,arial, sans-serif;
font-size: 90%;
text-align: left;
width: 976px;
margin-left: auto;
margin-right: auto;
}
p {
margin-left: 10px;
margin-right: 5px;
text-align: left;
font-size: 110%;
}
/*--------------Links formatting------------------*/
a:link {
background: #fff; color: #7d890d;
}
a:visited {
color: #034769;
}
a:hover {
color: #034769;
text-decoration: none;
}
a:active{
background: #63add0; color: #fff;
}
/*Bottom link formatting*/
p.bottom a:link {
background: #2d1d06; color: #f9b41f;
}
p.bottom a:visited {
color: #fff;
}
p.bottom a:hover {
color: #7d890d;
text-decoration: none;
}
p.bottom a:active{
background: #8742d6; color: #fff;
}
/*--------------------Page wrapper----------------*/
#wrapper {
margin: 0 auto;
width: 976px;
text-align: left;
}
/*Banner styles*/
#header {
width: 976px;
padding-left: 0px;
padding-bottom: 10px;
padding-top: 15px;
}
#footer {
clear: both;
background: #2d1d06; color: #fff;
font-family: "Helvetica Neue",helvetica, arial, sans-serif;
font-size: 90%;
font-weight: normal;
width: 976px;
padding-bottom: 3px;
padding-top: 3px;
}
#footer p {
text-align: center;
}
#content
{
margin-left: 15px;
}
/*---------------Navigation styles-------------------*/
#menu {
float: left;
margin:0;
padding-top: 0px;
width: 100%;
background: #7d890d; color: #fff;
}
#menu ul {
margin: 0px;
position: relative
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
padding: 5px 16px;
margin-right: 0px;
background: #7d890d; color: #fff;
text-decoration: none;
border-right: 1px solid #e2e2e2;
}
#menu ul li a:hover {
color: #fff; background: #f9b41f;
text-decoration: underline;
}
#menu li a#current {
background: #ba1212; color: #fff;
}
/*-------------Image area--------------*/
img
{
border: 0px 0px ;
padding-top: 30px;
padding-bottom: 25px;
border-radius: 0px;
}
.floatcenter {
float: left;
margin: 0px;
padding: 1px;
border: none;
}
.floatcenterb {
margin: 0px 228px;
padding: 1px;
border: none;
}
.floatright
{
float: right;
margin: 20px;
padding: 1px;
border: none;
}
.floatright2
{
float: right;
margin: 20px;
padding: 1px;
border: none;
}
/*---------------Headings----------------*/
hr{
position: relative;
width: 90%;
margin-left: 25px;
margin-right: 25px;
color: #3ca0d0;
border: 1px;
border-style: dotted;
}
h1{
color: #2d1d06;
font-size: 140%;
font-weight: normal;
margin-left: 10px;
}
h2{
color: #2d1d06;
font-weight: normal;
font-size: 130% ;
text-align: center;
text-decoration: underline;
margin-left: 0px;
}
h3{
font-size: 120%;
color: #2d1d06;
font-weight: bold;
text-align: left;
}
h4{
font-size: 120%;
color: #2d1d06;
font-weight: bold;
text-align: center;
}
h5{
font-size: 110%;
color: #7d890d;
width: 70px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: bold;
text-align: left;
}
/* Table styling */
table {
border: 0px;
border-collapse:collapse;
width: 100%;
margin: auto;
font-size: 90%;
}
th {
background-color: #000;
color: #FFF;
}
td {
padding: 2px 4px;
text-align: left;
border-bottom: 0px;
}
/*contact page*/
fieldset
{
margin: 10px 20px;
padding: 5px 10px;
border: 1px solid #3697B5;
background:#fff;
text-align: center;
}
legend
{
font-size: 80%;
color: #000; background: #fff;
font-weight:bold;
}
label
{
float: left; /* labels and input fields line up horizontally */
width: 200px;
margin-left: 5px;
text-align: center;
}
textarea
{
margin: 5px 10px;
}