Revision: 43098
Updated Code
at March 17, 2011 02:49 by sahwar
Updated Code
<!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/"/> <!-- 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>
<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>
Revision: 43097
Updated Code
at March 17, 2011 02:46 by sahwar
Updated Code
<!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/"/> <!-- 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>
<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>
Revision: 43096
Updated Code
at March 17, 2011 02:44 by sahwar
Updated Code
<!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/"/> <!-- 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>
<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 �¢ï¿½ï¿½ ������¾���¼ 49 �¢ï¿½ï¿½ ���³���»���°���²���° 463 (<span class="chapter-name">Sasuke vs. Raikage!!!</span>) �¢ï¿½ï¿½ ������������°���½���¸������° 1 ���¾��� 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>
Revision: 43095
Updated Code
at March 17, 2011 02:05 by sahwar
Updated Code
<!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/"/> <!-- 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>
<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 â�� ���¾�¼ 49 â�� �³�»�°�²�° 463 (<span class="chapter-name">Sasuke vs. Raikage!!!</span>) â�� �������°�½�¸���° 1 �¾�� 16</td>
<td><div class="div-collapse" width="25"><img src="http://img30.imageshack.us/img30/1516/collapsen.png"/></div></td>
</tr>
</table>
/* Fixes:
1. Don't show ugly blue borders around images in web browsers such as Mozilla Firefox.
2. Fix for the Mysterious whitespace gaps bug which affects
images placed in HTML tables. These bugs are present in GChrome, Mozilla Firefox and perhaps other web browsers as well.
3. Alternative fix for the Mysterious whitespace gaps below any in-table images:
Explanation of this problem: http://css-discuss.incutio.com/wiki/Unwanted_Gaps_In_Tables.*/
</body>
</html>
Revision: 43094
Updated Code
at March 16, 2011 17:07 by sahwar
Updated Code
<!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/"/> <!-- 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" />
<!-- HTML table and CSS design by sahwar for AnimeRulezzz.org. Code implementation and further
fixes by OmegaKO. This is meant to be used in the new redesign of the Read Manga Online
(online manga reader) section of AR. Also powered by sleeplessness and the useful
suggestions of the forumers from .
P.S. Check the end of this .html document ([Ctrl] + [F] -> "HELP") for some help and notes left by sahwar
to aid OmegaKO in implementing the new system. Inline HTML comments are marked
like this one, while CSS comments are between the /* and */ tags. These comments
are not rendered (a.k.a. ignored) by the user agent (like a web browser) and are thus
not displayed to end users. If you are reading this, then you are probably familiar
with the "View Source / View Source code" option of the browser context menu. :)
Good luck in trying to figure out how this sphaghetti code works. >:D
-->
<style type="text/css">
/* The following CSS goes in the document HEAD (after <head> and before </head>) or
is added to your external stylesheet.
In this example it is in the HEAD section to separate it from the BODY section.
For alternative ways to point to a CSS file, see .*/
/* FixER(R)s
Don't show ugly blue borders around images in web browsers such as Mozilla Firefox.
See http://css-discuss.incutio.com/wiki/Linked_Images and https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
for information on these 2 problems.
The first page explains the fix to leave the ugly blue borders around linked/link images,
while the second lists an easy fix for the Mysterious whitespace gaps bug which affects
images placed in HTML tables. These bugs are present in GChrome, Mozilla Firefox and
perhaps other web browsers as well, so it was worth fixing for the table to look right.) */
/* Begin FIXES AND MISCELLANEA */
<!-- Alternative fix for the Mysterious whitespace gaps below any in-table images:
Use tr.nonastywhitespaceinimages img, td.nonastywhitespaceinimages {display: block;} | and then add
the class "nonastywhitespaceinimages" to every desired image-in-a-table
Example:
<tr class="decoration"><td style="background: red;">
<img src="smallred.gif" height="1" width="1">
</td></tr>.
Explanation of this problem: http://css-discuss.incutio.com/wiki/Unwanted_Gaps_In_Tables .
-->
|
|
\/ */
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;
}
/*
Version that is buggy in Firefox (DON'T USE THIS):
a.popup:hover span {
position: absolute;
top: -226px; /* WRONG VERSION was originally bugged as: top: -226px; position: fixed; DON'T use the version in these brackets... */
left: 1px;
/* right: 1px; */
/* bottom: 1px; */
width: 248px;
height: 212px;
padding: 0px;
display: block;
border: 0px solid #FFFFFF; /* original: 0px solid #FFFFFF; */
}
*/
/* Don't expect to write standards code for IE. ;) */
a.popup:hover {
font-size: 100%;
}
/* POPUP onmouseover-like END. */
/* POPUP onmouseover END. */
.chapter-name {
font-weight:bold;
}
<!-- Test things which aren't supposed to be used:
#navlist {position:relative;}
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a {height:44px;display:block;}
#home {left:0px;width:46px;}
#home {background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') 0 0;}
#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}
#prev {left:63px;width:43px;}
#prev {background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') -47px 0;}
#prev a:hover {background: url('img_navsprites_hover.gif') -47px -45px;}
#next {left:129px;width:43px;}
#next {background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') -91px 0;}
#next a:hover {background: url('img_navsprites_hover.gif') -91px -45px;} -->
/* End MAIN PART */
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- 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. -->
<!-- Table goes in the document 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 � �þü 49 � óûðòð 463 (<span class="chapter-name">Sasuke vs. Raikage!!!</span>) � ���ðýø�ð 1 þ� 16</td>
<td><div class="div-collapse" width="25"><img src="http://img30.imageshack.us/img30/1516/collapsen.png"/></div></td>
</tr>
</table>
<!-- Some HELP.
I. To build this complexly styled table I had to look up over a thousand websites with
various CSS tricks, hacks and tips, so that the table looks right in most web browser.
I learned a lot about CSS because of this 'simple taks'.
II. Principle source of code inspiration:
- various online tutorials and CSS tips'n'tricks articles, some of them are listed below:
- v2 code for the 1px-border-table from http://www.textfixer.com/resources/css-tables.php (CSS Table with One Pixel Borders) .
- http://www.somacon.com/p141.php = useful webapp for quick CSS styling of HTML tables.
- http://css-discuss.incutio.com/wiki/Main_Page � VERY useful website for CSS webdesigners.
I learned the following from there:
http://css-discuss.incutio.com/wiki/Element_Width � so confusing at first... I'm refering to the CSS2 (table) box model, of course.
- many other websites...
III. BEST HTML/CSS/JavaScript/DHTML/AJAX/etc. TUTORIAL and tips websites:
- http://w3c.org (THE authority for webstandards, publishes the drafts and recommendations for the various versions of HTML, XHTML,
XML, CSS and more. The official CSS2 specification is available from there. Now if only browser vendors weren't so "I wanna define
the future standards while still supporting 95% of the current standards and 90% of HTML5 and CSS3...")
- http://w3schools.com/ (Same usefulness as the website listed below. I consider these websites twins. ;) )
- http://www.quackit.com/ (Useful HTML, CSS, etc. information useful for beginners and for refreshing your memory.)
- http://www.dynamicdrive.com/ (Useful ready-to-use CSS and JavaScript codes.)
- http://www.quirksmode.org/ (Contains tables of references about the standards-compliance/support in the different web browsers.)
- http://www.webstandards.org/learn/ ( http://www.webstandards.org/learn/external/ ) � The Web Standards Project (WaSP) Coalition.
- http://css-discuss.incutio.com/wiki/Main_Page (VERY useful, provides usage tips from some pro webdesigners that helped define CSS's
specifications.)
- http://www.javascriptkit.com/ (Ready-to-use JS scripts.)
- http://www.javascriptkit.com/domref/ (The DOM reference... I should someday take a closer look at it...
Hey, I'm a total n00b at HTML & CSS, what do you expect? ~sahwar)
- http://jquery.com/ (Probably the most widely used JavaScript library on the Web.)
- http://snipplr.com/ (Useful code snippets for Copy & Pasting. Example: http://snipplr.com/view/8121/html-test-page-for-css-style-guide/ ).
- SmashingMagazine.net network
- Google, naturally. ;) Although they ARE evil by design... :|
IV. Leftover information that was preserved as a personal self-reminder for future CSS-ing and HTML-ing:
color: #333333;
border-top: 0px;
height: 25px
width: 25px
width="25" height="25"
width="26" height="25"
-->
</body>
</html>
Revision: 43093
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at March 16, 2011 16:19 by sahwar
Initial Code
<!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/"/> <!-- 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" />
<!-- HTML table and CSS design by sahwar for AnimeRulezzz.org. Code implementation and further
fixes by OmegaKO. This is meant to be used in the new redesign of the Read Manga Online
(online manga reader) section of AR. Also powered by sleeplessness and the useful
suggestions of the forumers from .
P.S. Check the end of this .html document ([Ctrl] + [F] -> "HELP") for some help and notes left by sahwar
to aid OmegaKO in implementing the new system. Inline HTML comments are marked
like this one, while CSS comments are between the /* and */ tags. These comments
are not rendered (a.k.a. ignored) by the user agent (like a web browser) and are thus
not displayed to end users. If you are reading this, then you are probably familiar
with the "View Source / View Source code" option of the browser context menu. :)
Good luck in trying to figure out how this sphaghetti code works. >:D
-->
<style type="text/css">
/* The following CSS goes in the document HEAD (after <head> and before </head>) or
is added to your external stylesheet.
In this example it is in the HEAD section to separate it from the BODY section.
For alternative ways to point to a CSS file, see .*/
/* FixER(R)s
Don't show ugly blue borders around images in web browsers such as Mozilla Firefox.
See http://css-discuss.incutio.com/wiki/Linked_Images and https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
for information on these 2 problems.
The first page explains the fix to leave the ugly blue borders around linked/link images,
while the second lists an easy fix for the Mysterious whitespace gaps bug which affects
images placed in HTML tables. These bugs are present in GChrome, Mozilla Firefox and
perhaps other web browsers as well, so it was worth fixing for the table to look right.) */
/* Begin FIXES AND MISCELLANEA */
<!-- Alternative fix for the Mysterious whitespace gaps below any in-table images:
Use tr.nonastywhitespaceinimages img, td.nonastywhitespaceinimages {display: block;} | and then add
the class "nonastywhitespaceinimages" to every desired image-in-a-table
Example:
<tr class="decoration"><td style="background: red;">
<img src="smallred.gif" height="1" width="1">
</td></tr>.
Explanation of this problem: http://css-discuss.incutio.com/wiki/Unwanted_Gaps_In_Tables .
-->
|
|
\/ */
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;
}
/*
Version that is buggy in Firefox (DON'T USE THIS):
a.popup:hover span {
position: absolute;
top: -226px; /* WRONG VERSION was originally bugged as: top: -226px; position: fixed; DON'T use the version in these brackets... */
left: 1px;
/* right: 1px; */
/* bottom: 1px; */
width: 248px;
height: 212px;
padding: 0px;
display: block;
border: 0px solid #FFFFFF; /* original: 0px solid #FFFFFF; */
}
*/
/* Don't expect to write standards code for IE. ;) */
a.popup:hover {
font-size: 100%;
}
/* POPUP onmouseover-like END. */
/* POPUP onmouseover END. */
.chapter-name {
font-weight:bold;
}
<!-- Test things which aren't supposed to be used:
#navlist {position:relative;}
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a {height:44px;display:block;}
#home {left:0px;width:46px;}
#home {background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') 0 0;}
#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}
#prev {left:63px;width:43px;}
#prev {background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') -47px 0;}
#prev a:hover {background: url('img_navsprites_hover.gif') -47px -45px;}
#next {left:129px;width:43px;}
#next {background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') -91px 0;}
#next a:hover {background: url('img_navsprites_hover.gif') -91px -45px;} -->
/* End MAIN PART */
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- 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. -->
<!-- Table goes in the document 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 — том 49 — глава 463 (<span class="chapter-name">Sasuke vs. Raikage!!!</span>) — Ñтраница 1 от 16</td>
<td><div class="div-collapse" width="25"><img src="http://img30.imageshack.us/img30/1516/collapsen.png"/></div></td>
</tr>
</table>
<!-- Some HELP.
I. To build this complexly styled table I had to look up over a thousand websites with
various CSS tricks, hacks and tips, so that the table looks right in most web browser.
I learned a lot about CSS because of this 'simple taks'.
II. Principle source of code inspiration:
- various online tutorials and CSS tips'n'tricks articles, some of them are listed below:
- v2 code for the 1px-border-table from http://www.textfixer.com/resources/css-tables.php (CSS Table with One Pixel Borders) .
- http://www.somacon.com/p141.php = useful webapp for quick CSS styling of HTML tables.
- http://css-discuss.incutio.com/wiki/Main_Page — VERY useful website for CSS webdesigners.
I learned the following from there:
http://css-discuss.incutio.com/wiki/Element_Width — so confusing at first... I'm refering to the CSS2 (table) box model, of course.
- many other websites...
III. BEST HTML/CSS/JavaScript/DHTML/AJAX/etc. TUTORIAL and tips websites:
- http://w3c.org (THE authority for webstandards, publishes the drafts and recommendations for the various versions of HTML, XHTML,
XML, CSS and more. The official CSS2 specification is available from there. Now if only browser vendors weren't so "I wanna define
the future standards while still supporting 95% of the current standards and 90% of HTML5 and CSS3...")
- http://w3schools.com/ (Same usefulness as the website listed below. I consider these websites twins. ;) )
- http://www.quackit.com/ (Useful HTML, CSS, etc. information useful for beginners and for refreshing your memory.)
- http://www.dynamicdrive.com/ (Useful ready-to-use CSS and JavaScript codes.)
- http://www.quirksmode.org/ (Contains tables of references about the standards-compliance/support in the different web browsers.)
- http://www.webstandards.org/learn/ ( http://www.webstandards.org/learn/external/ ) — The Web Standards Project (WaSP) Coalition.
- http://css-discuss.incutio.com/wiki/Main_Page (VERY useful, provides usage tips from some pro webdesigners that helped define CSS's
specifications.)
- http://www.javascriptkit.com/ (Ready-to-use JS scripts.)
- http://www.javascriptkit.com/domref/ (The DOM reference... I should someday take a closer look at it...
Hey, I'm a total n00b at HTML & CSS, what do you expect? ~sahwar)
- http://jquery.com/ (Probably the most widely used JavaScript library on the Web.)
- http://snipplr.com/ (Useful code snippets for Copy & Pasting. Example: http://snipplr.com/view/8121/html-test-page-for-css-style-guide/ ).
- SmashingMagazine.net network
- Google, naturally. ;) Although they ARE evil by design... :|
IV. Leftover information that was preserved as a personal self-reminder for future CSS-ing and HTML-ing:
color: #333333;
border-top: 0px;
height: 25px
width: 25px
width="25" height="25"
width="26" height="25"
-->
</body>
</html>
Initial URL
example-of-a-buggy-CSS-for-an-HTML-table
Initial Description
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).
Initial Title
Buggy CSS for an HTML table (example)
Initial Tags
css, table, html
Initial Language
HTML