/ Published in: HTML
A code snippet for review by StackOverflow.com members.
I would appreciate any help that'll aid me in fixing the bugs in the table (they are described in the StackOverflow question at http://stackoverflow.com/questions/5321646/buggy-css-for-an-html-table).
I would appreciate any help that'll aid me in fixing the bugs in the table (they are described in the StackOverflow question at http://stackoverflow.com/questions/5321646/buggy-css-for-an-html-table).
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <base href="file:///E:/sahwar's%20Labs/AnimeRulezzz/html%20and%20css%20for%20AR/AR-mangareader-table/"/> <!-- defines the master domain (offline, online) of/for relative links... --> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="expires" content="-1" /> <meta http-equiv= "pragma" content="no-cache" /> <meta name="Various (AnimeRulezzz.org, sahwar, OmegaKO)" content="online manga reader redesign project animerulezzz.org" /> <meta name="robots" content="all" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="online manga reader redesign project animerulezzz.org." /> <meta name="keywords" content="online, manga reader, redesign, project, animerulezzz.org, CSS, JavaScript, comic gallery, anime, buttons" /> <style type="text/css"> /* Begin FIXES AND MISCELLANEA */ table img {border:none; display:block; vertical-align: bottom;} a img { border: none;} img {display:block; border: none;} table {border-spacing: 0px 0px;} table tbody {border-top:none;} div img {vertical-align: bottom;} /* End FIXES AND MISCELLANEA */ /* Begin MAIN PART */ /* table1 BEGIN */ table.gridtable1 { font-family: Tahoma,verdana,arial,sans-serif; font-size: 8pt; font-color: #000000; table-layout: fixed; border-width: 1px; border-color: #219DEC; border-style: solid; border-collapse: collapse; cellpadding: 0px; cellspacing: 0px; padding: 0px; margin: 0px; align: center; } table.gridtable1 th { border-width: 0px; border-style: solid; border-color: #219DEC; padding: 0px; margin: 0px; } table.gridtable1 td { border-color: #219DEC; /* AnimeRulezzz blue */ border-style: solid; border-width: 0px; text-align: left; padding: 0px; margin: 0px; background-color: none; } .td-bluebg {background-color: #219DEC; cellspacing: 0 0 0 0; cellpadding: 0px; width: 25px; height: 25px;} .td-description {width: 26px; height: 25px;} .div-collapse {width: 25px; height: 25px; cellspacing: 0 0 0 0; cellpadding: 0px;} .td-metadata {cellspacing: 0 0 0 0; cellpadding: 0px; width: 26px; height: 25px;} .td-text {height: 25px; padding: 0px; text-align: left;} /* table1 END */ /* POPUP onmouseover-like BEGIN. */ a.popup { position: relative; } a.popup span { display: none; } a.popup:hover span { position: absolute; top: -217px; left: 0; width: 248px; height: 212px; padding: 1px; display: block; border: 0px solid #FFFFFF; } /* Don't expect to write standards code for IE. ;) */ a.popup:hover { font-size: 100%; } /* POPUP onmouseover-like END. */ .chapter-name { font-weight:bold; } /* End MAIN PART */ </style> </head> <body> <!-- The following breakline tags are put only to leave enough space for the onmouseover-like CSS effect for the "?" button to be fully visible. Remove these in the final design. --> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <!-- Table goes in the document BODY --> <table class="gridtable1" width="688" height= "27" cellspacing="0" cellpadding="0"> <tr> </tr> </table> </body> </html>
URL: example-of-a-buggy-CSS-for-an-HTML-table