CODEWITHSUNDEEP
htmlcssfirefoxborder
bzrr
bzrr

Reputation: 1530

Bottom border doesn't show up in Firefox

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 border issue in firefox

Chrome border shows up just fine in 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;
}

Upvotes: 1

Views: 3659

Answers (2)

Anees Hikmat Abu Hmiad
Anees Hikmat Abu Hmiad

Reputation: 3550

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.

Upvotes: 2

Matthew Allen
Matthew Allen

Reputation: 821

Following this similar problem.

Replace:

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

With:

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

Upvotes: 3

Related Questions