html - Bottom border doesn't show up in Firefox -
i'm attempting replicate webpage learning purposes, , reason bottom border of table not showing up. guess has bottom section overlapping @ end of top section (even though doesn't seem in firebug) don't know how fix it. also, border shows fine in chrome, no problem there.
firefox 
chrome 
exactly why happening? how can 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' 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 years</a></td> </tr> <tr> <th class="also" rowspan="2" ><br /> <br /> 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 , 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' 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 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; }
following similar problem.
replace:
table { border-collapse: collapse; border-spacing: 0; } with:
border-collapse: separate; border-spacing: 0;
Comments
Post a Comment