Advanced Search

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

Expand | Embed | Plain Text

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