Posted By

sahwar on 03/16/11

Tagged

Versions (?)

Last Edited at 03/16/11 04:19pm

Statistics

Viewed 952 times

Favorited by 0 user(s)

Related snippets

Buggy CSS for an HTML table (example)

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

Highlighted TextExpand

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>AR-omr-design-v2 (BETA)</title>
  <base href="file:///E:/sahwar's%20Labs/AnimeRulezzz/html%20and%20css%20for%20AR/AR-mangareader-table/"/> 
  <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" />

/* 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>

<table class="gridtable1"  width="688" height= "27" cellspacing="0" cellpadding="0">
<tr>
	<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>
	<td class="td-description"><img src="http://img862.imageshack.us/img862/4259/descriptiontransparenti.png"/></td>
	<td style="width: 17px; border-left-style: none; border-right-style: none;">Â»</td>
	<td class="td-text" colspan="6">Naruto - volume 49 - chapter 463 (<span class="chapter-name">Sasuke vs. Raikage!!!</span>) - page 1 of 16</td>
	<td><div class="div-collapse" width="25"><img src="http://img30.imageshack.us/img30/1516/collapsen.png"/></div></td>
</tr>
</table>

</body>
</html>

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

Report this snippet Tweet