Der untere Rand erscheint nicht in Firefox - html, css, firefox, border

Ich versuche, eine Webseite für zu replizierenLernzwecke, und aus irgendeinem Grund wird der untere Rand dieser Tabelle nicht angezeigt. Ich nehme an, es hat etwas damit zu tun, dass sich der untere Abschnitt am Ende des oberen Abschnitts überlappt (auch wenn es in Firebug nicht so aussieht), aber ich weiß nicht, wie ich es beheben kann. Auch die Grenze kommt in Chrome gut zur Geltung, kein Problem.

Feuerfuchs Grenzproblem in Firefox

Chrom Grenze zeigt sich gerade gut in Chrom

Warum genau passiert das? Wie kann ich es reparieren?

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Beach Boys</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/beach.css" />
</head>
<body>

<!-- HEADER -->
<header>
<img class="left-logo" src="/images/assets/images/logo02.gif" alt="George Starostin Reviews" />
<img class="right-logo" src="/images/assets/images/logo01.gif" alt="Only Solitaire" />
<table>
<tr>
<td><a href="#" >Main Index Page</a></td>
<td><a href="#" >General Ratings Page</a></td>
<td><a href="#" >Rock Chronology Page</a></td>
<td><a href="#" >Song Search Page</a></td>
<td><a href="#" >New Additions</a></td>
<td><a href="#" >Message Board</a></td>
</tr>
</table>
</header>

<!-- INFO -->
<section class="info" >
<h1>THE BEACH BOYS</h1>
<p><cite>"I"m pickin" up good vibrations"</cite></p>
<img src="/images/assets/images/bb_info.jpg" alt="The Beach Boys" />
<p class="p-rank" >Class <span class="rank" >C</span></p>
<table>
<tr>
<th>Main Category</th>
<td><a href="#" >Lush Pop</a></td>
</tr>
<tr>
<th class="also">Also Applicable</th>
<td><a href="#" >Pop Rock</a>, <a href="#" >Art Rock</a></td>
</tr>
<tr>
<th>Starting Period</th>
<td><a href="#" >The Early Years</a></td>
</tr>
<tr>
<th class="also" rowspan="2" ><br /> <br /> Also active in</th>
<td rowspan="3" >
<a href="#" >The Psychedelic Years</a>, <a href="#" >The Artsy/Rootsy Years</a>, <br />
<br />
<a href="#" >The Interim Years</a>, <a href="#" >The Punk/New Wave Years</a>, <br />
<br />
<a href="#" >The Divided Eighties</a>
</td>
</tr>
</table>
</section>

<!-- BOOKMARKS -->
<section class="intro">
<a href="#intro">Introduction</a>
<p>ALBUM REVIEWS: </p>
<ul>
<li>1962: <a href="#">Surfin" Safari</a></li>
<li>1963: <a href="#">Surfin" USA</a></li>
<li>1963: <a href="#">Surfer Girl</a></li>
<li>1963: <a href="#">Little Deuce Coupe</a></li>
<li>1964: <a href="#">Shut Down Vol. 2</a></li>
<li>1964: <a href="#">All Summer Long</a></li>
<li>1964: <a href="#">Concert</a></li>
<li>1965: <a href="#">Today!</a></li>
<li>1965: <a href="#">Summer Days (And Summer Nights)</a></li>
<li>1965: <a href="#">Party!</a></li>
<li>1966: <a href="#">Pet Sounds</a></li>
<li>1967: <a href="#">Smiley Smile</a></li>
<li>1967: <a href="#">Wild Honey</a></li>
<li>1968: <a href="#">Friends</a></li>
<li>1968: <a href="#">Stack-O-Tracks</a></li>
<li>1969: <a href="#">20/20</a></li>
<li>1970: <a href="#">Live in London</a></li>
<li>1970: <a href="#">Sunflower</a></li>
<li>1971: <a href="#">Surf"s Up</a></li>
<li>1972: <a href="#">Carl And The Passions/So Tough</a></li>
<li>1973: <a href="#">Holland</a></li>
<li>1973: <a href="#">In Concert</a></li>
<li>1976: <a href="#">15 Big Ones</a></li>
<li>1977: <a href="#">Love You</a></li>
<li>1978: <a href="#">M.I.U. Album</a></li>
<li>1979: <a href="#">L.A. (Light Album)</a></li>
<li>1980: <a href="#">Keepin" The Summer Alive</a></li>
<li>1985: <a href="#">The Beach Boys</a></li>
</ul>
</section>

<!-- INTRO -->
<section>
</section>

<!-- REVIEWS -->
<section>
</section>

<!-- FOOTER -->
<footer>
</footer>

</head>
</html>

CSS

/*
==============================
CSS Reset
==============================
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/*
==============================
General
==============================
*/
body {
background-color: rgb(128, 255, 128);
}

p {
margin: 10px;
}

th, td {
border: 1px solid black;
border-top-color: gray;
border-left-color: gray;
padding: 5px 3px;
}

cite {
font-style: italic;
}

/*
==============================
Header
==============================
*/

header {
border-bottom: 1px solid black;
margin: 10px auto 0 auto;
padding: 0 10px;
overflow: auto;
}

header table {
font-size: 13px;
margin-left: auto;
margin-right: auto;
}

header .left-logo {
width: 150px;
float: left;
}

header .right-logo {
width: 200px;
height: 35px;
float: right;
}

/*
==============================
Info
==============================
*/

.info {
width: 960px;
text-align: center;
margin: 10px auto;
}

h1 {
color: rgb(255, 0, 0);
font-size: 48px;
font-weight: bold;
text-decoration: underline;
padding: 10px;
}

.info cite {
font-size: 13px;
}

.info img {
width: 466px;
}

.p-rank {
font-size: 24px;
}

.rank {
color: rgb(0, 0, 255);
font-weight: bold;
}

.info p {
padding: 10px;
}

.info table {
display: inline-block;
text-align: left;
}

.info table th {
font-weight: bold;
}

.info .also {
font-style: italic;
font-weight: normal;
}

/*
==============================
Bookmarks
==============================
*/

.intro ul {
list-style-type: circle;
}

Antworten:

2 für die Antwort № 1

Danach ähnliches Problem.

Ersetzen:

table {
border-collapse: collapse;
border-spacing: 0;
}

Mit:

border-collapse: separate;
border-spacing: 0;

1 für die Antwort № 2

versuche diesen Kumpel,

setze dies auf Tabelle <table cellpadding="0" cellspacing="0">

und entferne a border-collapse: collapse;

Es wird gut funktionieren

Viel Glück


Speisekarte