Buggy CSS for an HTML table (example)


/ Published in: HTML
Save to your folder(s)

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).


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <title>AR-omr-design-v2 (BETA)</title>
  3. <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... -->
  4. <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. <meta http-equiv="expires" content="-1" />
  7. <meta http-equiv= "pragma" content="no-cache" />
  8. <meta name="Various (AnimeRulezzz.org, sahwar, OmegaKO)" content="online manga reader redesign project animerulezzz.org" />
  9. <meta name="robots" content="all" />
  10. <meta name="MSSmartTagsPreventParsing" content="true" />
  11. <meta name="description" content="online manga reader redesign project animerulezzz.org." />
  12. <meta name="keywords" content="online, manga reader, redesign, project, animerulezzz.org, CSS, JavaScript, comic gallery, anime, buttons" />
  13.  
  14.  
  15. <style type="text/css">
  16.  
  17. /* Begin FIXES AND MISCELLANEA */
  18.  
  19. table img {border:none; display:block; vertical-align: bottom;}
  20. a img { border: none;}
  21. img {display:block; border: none;}
  22. table {border-spacing: 0px 0px;}
  23. table tbody {border-top:none;}
  24. div img {vertical-align: bottom;}
  25.  
  26. /* End FIXES AND MISCELLANEA */
  27.  
  28. /* Begin MAIN PART */
  29.  
  30. /* table1 BEGIN */
  31. table.gridtable1 {
  32. font-family: Tahoma,verdana,arial,sans-serif;
  33. font-size: 8pt;
  34. font-color: #000000;
  35. table-layout: fixed;
  36. border-width: 1px;
  37. border-color: #219DEC;
  38. border-style: solid;
  39. border-collapse: collapse;
  40. cellpadding: 0px;
  41. cellspacing: 0px;
  42. padding: 0px;
  43. margin: 0px;
  44. align: center;
  45. }
  46.  
  47. table.gridtable1 th {
  48. border-width: 0px;
  49. border-style: solid;
  50. border-color: #219DEC;
  51. padding: 0px;
  52. margin: 0px;
  53. }
  54.  
  55. table.gridtable1 td {
  56. border-color: #219DEC; /* AnimeRulezzz blue */
  57. border-style: solid;
  58. border-width: 0px;
  59. text-align: left;
  60. padding: 0px;
  61. margin: 0px;
  62. background-color: none;
  63. }
  64.  
  65. .td-bluebg {background-color: #219DEC; cellspacing: 0 0 0 0; cellpadding: 0px; width: 25px; height: 25px;}
  66. .td-description {width: 26px; height: 25px;}
  67. .div-collapse {width: 25px; height: 25px; cellspacing: 0 0 0 0; cellpadding: 0px;}
  68. .td-metadata {cellspacing: 0 0 0 0; cellpadding: 0px; width: 26px; height: 25px;}
  69. .td-text {height: 25px; padding: 0px; text-align: left;}
  70. /* table1 END */
  71.  
  72. /* POPUP onmouseover-like BEGIN. */
  73. a.popup {
  74. position: relative;
  75. }
  76.  
  77. a.popup span {
  78. display: none;
  79. }
  80.  
  81. a.popup:hover span {
  82. position: absolute;
  83. top: -217px;
  84. left: 0;
  85. width: 248px;
  86. height: 212px;
  87. padding: 1px;
  88. display: block;
  89. border: 0px solid #FFFFFF;
  90. }
  91.  
  92. /* Don't expect to write standards code for IE. ;) */
  93. a.popup:hover {
  94. font-size: 100%;
  95. }
  96. /* POPUP onmouseover-like END. */
  97.  
  98. .chapter-name {
  99. font-weight:bold;
  100. }
  101.  
  102. /* End MAIN PART */
  103.  
  104.  
  105. </head>
  106.  
  107. <!-- 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. -->
  108.  
  109. <br>
  110. <br>
  111. <br>
  112. <br>
  113. <br>
  114. <br>
  115. <br>
  116. <br>
  117. <br>
  118. <br>
  119.  
  120. <!-- Table goes in the document BODY -->
  121.  
  122. <table class="gridtable1" width="688" height= "27" cellspacing="0" cellpadding="0">
  123. <tr>
  124. <td class="td-bluebg"><a href="#" class="popup"><img src="http://img838.imageshack.us/img838/1516/helpiconh.png"/><span><img src="http://img705.imageshack.us/img705/9534/aromrlegendpopup2.png" alt="Legend popup" /></span></a></td>
  125. <td class="td-description"><img src="http://img862.imageshack.us/img862/4259/descriptiontransparenti.png"/></td>
  126. <td style="width: 17px; border-left-style: none; border-right-style: none;">»</td>
  127. <td class="td-text" colspan="6">Naruto - volume 49 - chapter 463 (<span class="chapter-name">Sasuke vs. Raikage!!!</span>) - page 1 of 16</td>
  128. <td><div class="div-collapse" width="25"><img src="http://img30.imageshack.us/img30/1516/collapsen.png"/></div></td>
  129. </tr>
  130.  
  131. </body>
  132. </html>

URL: example-of-a-buggy-CSS-for-an-HTML-table

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.