Affichage Javascript dans Safari et Chrome mais pas Firefox?

Dans cette tâche (où je ne peux utiliser que javascript), ma page s'affiche correctement dans Safari et Chrome mais pas dans Firefox. Dans firefox, la div "bookselection" s'affiche à droite de l'en-tête. Une idée pourquoi?Affichage Javascript dans Safari et Chrome mais pas Firefox?

<!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> 
    &nbsp;<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 &copy; 2012 oo Design | All Rights Reserved | <a href="#">Terms and Conditions</a></p> 
    </div> 
    <!-- foot section ends -->  

    <!-- wrapper section starts --> 

</div>  
</body> 
</html>

Voici mon fichier .js. Je viens de commencer un cours sur javascript, donc je ne peux pas utiliser tout autre code de programmation autre que 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;

Voici le 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; 
}

Source

2012-10-07 wizzme

Où est le css? –

Il semble que vous avez des problèmes dans votre CSS, pas dans JS. – Inferpse

La norme exige que vous ne pouvez utiliser float sur bloc- éléments de niveau (display:block). Apparemment, Chrome et Safari font automatiquement la promotion des éléments dont l'attribut float est défini sur display:block ou display:inline-block;. Vous devez donc appliquer display:block à votre .floatright:

.floatright 
{ 
    display: block; 
    float: right; 
    margin: 20px; 
    padding: 1px; 
    border: none; 
}

également quelques conseils:

Vous pouvez initialiser votre tableau lorsque vous créez avec var myArray = new Array(value0,value1,value2)
Vous pouvez utiliser var myArray = [v0,v1,v2...] au lieu de var myArray = new Array(v0,v1,v2...). Cela vous permet de créer vos variables un peu plus facile:
```
var title = ["The Innocent", "Zero Day", "The Bat", 
     "Mad River", "Low Pressure", "Zagreb Cowboy"]; 
```
Vous pouvez grouper des sélecteurs CSS avec un ,, les règles seront appliquées à tous les sélecteurs du groupe:
```
h1, h2, h3, h4{ 
    color: #2d1d06; 
} 
h3, h4{ 
    font-weight: bold; 
} 
```

Source

2012-10-07 22:11:37 Zeta

Affichage Javascript dans Safari et Chrome mais pas Firefox?

Répondre

Questions connexes