Userscripts.org

Hey jesse, found a couple of errors with w3's validation tool. I'm assuming you'd care about it, seeing as this is a Web 2.0-style website and you're using XHTML markup. Here are the fixes:

1) Line 22, Column 25: there is no attribute "height".
change:

<h1><a href="/" height="24" title="Userscripts.org"><img alt="Userscripts.org" height="24" src="http://static.userscripts.org/images/userscripts.org.png?1227415626" /></a></h1>

<h1><a href="/" title="Userscripts.org"><img alt="Userscripts.org" src="http://static.userscripts.org/images/userscripts.org.png?1227415626" /></a></h1>

2-7) Line 375, Column 79: cannot generate system identifier for general entity "color".
change:

<script src="http://userscripts.uservoice.com/widgets/tab.js?alignment=right&color=f18705" type="text/javascript"></script>

  <script src="http://userscripts.uservoice.com/widgets/tab.js?alignment=right&amp;color=f18705" type="text/javascript"></script>

  <script src="http://userscripts.uservoice.com/widgets/tab.js" type="text/javascript"></script>

8-9) document type does not allow element "script" here.
change:

</body>
  <script type="text/javascript">var auth_token = '9b7dfc9831d46f763fb113e7fca0d9dacdf4684e';</script>

  <script type="text/javascript">var auth_token = '9b7dfc9831d46f763fb113e7fca0d9dacdf4684e'</script>
</body>

These are errors on the homepage only; i'll check out other parts of the site later.

also, I could help you migrate this site to the XHTML 1.1 specification, which is stricter than XHTML 1.0 Transitional, but allows pages to render well on many devices.

I fixed those issues. Thanks for spotting them.

As for XHTML 1.1 I'll have to read about what new things it requires first.

Okay on the forums, there are several errors:

1) Numbers starting id's
ex:

<tr class="post hentry " id="79717-row">

<tr class="post hentry">

<tr class="post hentry" id="row-79717">

2) Spinners lacking alt-attributes, and closing properly:

<img src='/images/spinner_bounce.gif' style='display:none; vertical-align:middle;' id='edit-79689_spinner'>

<img src="/images/spinner_bounce.gif" style="display:none;vertical-align:middle" id="edit-79689_spinner" alt="Spinner"/> 

3) "Voices" Section has stray list tags
Ex:

  <h5>Voices</h5>
  
    <a href="/users/61251" rel="nofollow" title="avg"><img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=615a797afdf93c242e2b86221b9d02e6&amp;r=PG&amp;s=32&amp;default=identicon" width="32" /></a></li>

  <h5>Voices</h5>
    <a href="/users/61251" rel="nofollow" title="avg"><img alt="" class="photo" height="32" src="http://www.gravatar.com/avatar.php?gravatar_id=615a797afdf93c242e2b86221b9d02e6&amp;r=PG&amp;s=32&amp;default=identicon" width="32" /></a>

On the main forums page:

The error: <p> elements aren't allowed in <p> elements:

           <p class="desc"><p>Have an idea for a killer script? Talk about it in here.</p>
        </p>

Perhaps you meant:

     <p class="desc">Have an idea for a killer script? Talk about it in here.</p>

The browser (firefox 3.0.4) renders it as :

     <p class="desc"></p>
	<p>Have an idea for a killer script? Talk about it in here.</p>

On the scripts page,

<a href="http://www.amazon.com/exec/obidos/ASIN/0596101651/ref%3Dnosim/diveintomark20"><img style="display: block; margin: 5px auto" border="0" src="/images/greasemonkeyhacks.jpg" alt="Greasemonkey Hacks"></a>

should be:

<a href="http://www.amazon.com/exec/obidos/ASIN/0596101651/ref%3Dnosim/diveintomark20"><img style="display: block; margin: 5px auto" border="0" src="/images/greasemonkeyhacks.jpg" alt="Greasemonkey Hacks" /></a>

On the users page,

the search doesn't have an action attribute:

  <form class="search" method="get"><label for="q" id="q_label">Find user by name</label><input id="q" name="q" type="text" /></form>

to

  <form action="somethinghere" class="search" method="get"><label for="q" id="q_label">Find user by name</label><input id="q" name="q" type="text" /></form>

On scripts pages in general,

1) Broken "span" :

<div class="postactions">
  <span class="share stumble"><a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fuserscripts.org%2Fscripts%2Fshow%2F26062" rel="nofollow">Stumble It!</a></span>
  <span class="discuss"><a href="/scripts/discuss/26062" rel="nofollow">Discuss this script</a>
</div>

should be:

<div class="postactions">

  <span class="share stumble"><a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fuserscripts.org%2Fscripts%2Fshow%2F26062" rel="nofollow">Stumble It!</a></span>
  <span class="discuss"><a href="/scripts/discuss/26062" rel="nofollow">Discuss this script</a>
</span></div>

2) None of the bar images in the Review Box have "alt" attributes (required in XHTML 1 trans)

3) Broken spans in orange review bars.
ex:

          <td class="value"><span><img src="/images/bar.gif" height="10" width="33" /></td> <!-- NO SPAN CLOSER -->

change to:

          <td class="value"><span><img src="/images/bar.gif" height="10" width="33" /></span></td>

I think I fixed all of these save the "spinner" issue, since Rails is generating that (incorrectly).

Once I move from prototype.js to jQuery, I'll redo the ajax integration code.

( mooTools is nice as well )

I like it better because it has the standards for easy element creation, ajax requests and wonderful bits like the $$ function, but it has crazy-awesome ways to manipulate and "slide" css attributes. Check it out!

I agree that moo is nice. I prefer jQuery because it is what I know and am productive in.

The ajax on this site is purposely minimal (if you were around when Britt and I first launched the site as greasemonkeyed.com, you might remember TONS of pointless ajax).

Oh I found one more mistake (on all user profiles)

There's this stray bit laying around:

<style type="text/css">li{ list-style:none }</style>

outside of the "head" section. move to stylesheet or head?

I don't notice much about those errors

Probably not no, because most browsers "fix" these things themselves. But that doesn't mean we have to get rite of them, and do it the "correct" way.

Ya, I appreciate it!

Yeah, that's the way it used to be: you make a web page, and check around every browser and make sure it looks okay. But if you obey web standards set by the W3C, you're helping the strive for a brighter future of the internet by following the rules, so that HTML rendering is no longer a guessing game, and something that is defined solidly.

Plus, valid XML is required for many things, like JavaScript's DOMParser.