Bottom border doesn't show up in Firefox

Question

I'm attempting to replicate a webpage for learning purposes, and for some reason the bottom border of this table is not showing up. I guess it has something to do with the bottom section overlapping at the end of the top section (even though it doesn't seem so in Firebug) but I don't know how to fix it. Also, the border shows up just fine in Chrome, no problem there.

Firefox Firefox 中的边界问题

Chrome 边框在 chrome 中显示得很好

Exactly why is this happening? How can I fix it?

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="assets/images/logo02.gif" alt="George Starostin Reviews" />
    <img class="right-logo" src="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="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;
}

Answer 1

Following this similar problem .

Replace:

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

With:

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

Answer 2

try this mate,

set this to table <table cellpadding="0" cellspacing="0">

and remove a border-collapse: collapse;

its will be work fine

good luck

Update 1:

these attribute( cellpadding, cellspacing ) no need more and you can remove it too and use CSS style direct like accept answer.

Bottom border doesn't show up in Firefox

Question

2 answers

solution1
3 ACCPTED 2014-06-08 08:59:52

solution2
2 2014-06-08 07:50:44

Update 1:

Bottom border doesn't show up in Firefox

Question

2 answers

solution1 3 ACCPTED 2014-06-08 08:59:52

solution2 2 2014-06-08 07:50:44

Update 1:

solution1
3 ACCPTED 2014-06-08 08:59:52

solution2
2 2014-06-08 07:50:44