Dr. McNinja and PHP/CSS

I’ve been noticing how on one of my favorite webcomics, Dr. McNinja, the page that displayed each comic was loading pretty slow.

Before:

<td valign=top><table border="0">
<tr><td align=center width="175"px><a href="page.php?pageNum=1&issue=10"> <img src="/graphics/1.gif" border=0> </a> </td></tr>
<tr><td align=center width="175"px><a href="page.php?pageNum=2&issue=10"> <img src="/graphics/2.gif" border=0> </a> </td></tr>
<tr><td align=center width="175"px><a href="page.php?pageNum=3&issue=10"> <img src="/graphics/3.gif" border=0> </a> </td></tr>
<tr><td align=center width="175"px><a href="page.php?pageNum=4&issue=10"> <img src="/graphics/4.gif" border=0> </a> </td></tr>
<tr><td align=center width="175"px><a href="page.php?pageNum=5&issue=10"> <img src="/graphics/5.gif" border=0> </a> </td></tr>

After:

<td valign=top id="pages">
<a href="/page.php?pageNum=1&issue=10">1</a>
<a href="/page.php?pageNum=2&issue=10">2</a>
<a href="/page.php?pageNum=3&issue=10">3</a>
<a href="/page.php?pageNum=4&issue=10">4</a>
<a href="/page.php?pageNum=5&issue=10">5</a>

CSS:

#pages a { font-weight: bold; color: #FFFFFF; background-color: #000000; display: block; text-align: center; width: 25px; margin-bottom: 3px; text-decoration: none; }

PHP (with NEW current page highlight! oooohhhhhh!):

for($p = 1; $p <= $pages; $p++) {
  unset($style); if($p == $page) { $style = ‘ style="color: #CCCCCC;" ‘; }
  echo ‘<a href="/page.php?pageNum=’.$p.’&issue=’.$issue.’"’.$style.’>’.$p.'</a>’."\n";
}

For some reason unbeknownst to me (and I emailed the tech girl, Zoe (who apparently offers help on websites, WTF?)), it was deployed so the output is as such:

<td valign=top id="pages"><table border="0"> <tr> <td align=\"center\" width=\"175\"px> <a href="/page.php?pageNum=1&issue=10">1</a> </td> </tr><tr> <td align=\"center\" width=\"175\"px> <a href="/page.php?pageNum=2&issue=10">2</a> </td> </tr><tr> <td align=\"center\" width=\"175\"px> <a href="/page.php?pageNum=3&issue=10">3</a> </td> </tr>

Yanno, you try to help some people, and they just don’t really listen. And yes, those slashes before the double-quotes are in the output HTML.

The page load is still much faster after dropping all those img calls, but meh. Why the extra table? Why????

2 comments

  1. Not everyone can be as awesome as you, Will. A-W-E-S-O-M-E!

    I like in the Before how they specified the width as:

    width=”175″px

    Don’t do it that way. You’ll never make a dime.

Leave a comment

Your email address will not be published. Required fields are marked *