Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Vanilla's CSS/XHTML

edited August 2006 in Vanilla 1.0 Help
Just jotting down some things I notice as I notice them with editing CSS.. <div class="CommentIcon" style="background-image:url('');"> </div> Why isn't this an <img /> tag? Is it to make sure the image size stays exact? If so why bother with the  ? <li><span>CommentAuthor</span><a href="">zeeg</a></li> <li><span>CommentTime</span>Aug 5th 2006 <em>edited</em></li></ul> Why is this a list? Why not a definition list if nothing else? HideComment('/ajax/switch.php', '1', '53', '225', 'Are you sure you wish to undelete this comment?', 'Are you sure you wish to delete this comment?', 'HideComment225'); return false;" This is repeated quite a bit, might be better to store the text inside the function, or in a variable. <fieldset> <legend>Add your comments</legend><form id="frmPostComment" method="post" action=""><input type="hidden" name="CommentID" value="0" /> Yell at me if I'm wrong, but I think <form> goes outside of <fieldset> :) <input type="submit" name="btnSave" value="Add your comments" class="Button SubmitButton AddCommentsButton" onclick="Wait(this, 'Wait');" /> </div> <a id="pgbottom" name="pgbottom"> </a> What's with the  's there? There are multiple (many) H1's on each page. In my humble opinion, and from my experiences, it is best to only use a single h1 describing exactly what that page is, then h2 for the major headers/keywords, h3 for bylines/subheadings, and that's usually as far as I go. Yes I'm nitpicking, but they're just basic ideas as I love how well Vanilla has kept up w/ standards :) Hope some of this helps!


  • I'm guessing you can call it a bug that & nbsp; shows up as a space instead of what it actually is when you choose Text? :)
  • edited August 2006
    1. If the icon was an img tag, the browser would resize the icon rather than cropping it.

    2. There really isn't any perfect markup system for this sort of thing; you're going to be making compromises and stretching the meanings of semantic tags any way you slice it. There were a bunch of definition lists in the old theme, which on closer scrutiny turned out to have no semantic purpose at all, so they got cut.

    3. I have no idea what you're asking. (EDIT: Oh, I get it) The non-breaking spaces are added to empty elements (I believe) so they show up in IE. I haven't really looked at the text formatter to see if it is escaping HTML character entities, but I suspect that it is not.

    4. That is more of a guideline than anything. On a properly-structured page, the rank of a header is redundant (this is why h1-h6 are deprecated in XHTML 2.0) I do agree that it would be nice to have some more consistency there, but it's at best a minor issue.
  • I haven't read up on XHTML 2.0 but if that's the case, I won't be.. ever switching over. I rely on search results to boost my pages and headers play a big factor in making sure pages are labeled exactly as I want them to be :) I believe that IE bug, if that's the case, was IE 5.0 and earlier. I don't think it exists in 6.0. I was also a bit curious as to why the <span> labels in the list weren't actual normal words. Is that part of a localization system I haven't noticed?
  • You don't need an non breaking space to force an element to render, a simple HTML comment in an element will do.
  • DraganBabic: <em>You don't need an non breaking space to force an element to render, a simple HTML comment in an element will do.</em> I think I tried the comment, but without any success.
  • edited August 2006
    I really never actually had that problem, I don't use that kind of methods any more really. Try with conditional comments then if it is needed only for IE: <!--[if IE]><div>Whatever you want</div><![endif]--> Now only IE sees this markup, to all else it is a HTML comment. EDIT: Damn, it ate my preformated text, here's the plaintext version.
  • Although the comment is better, that's more bytes. The smaller the page size the better, even if its only 20 bytes smaller ;) If I recall correctly the only thing that had issues not display were empty table cells, which there is CSS for, but again, not 100% sure.
  • edited August 2006
    zinor: I'm sorry if I was unclear before. XHTML doesn't do away with headers entirely, just the 'h1' - 'h6' tags, which are replaced by simply 'h'. It derives its rank from its location in the document structure. Together with

    In current html, you might write something like this:

    <body> <h1>Page Title</h1> <p>content</p> <div> <h2>Post 1 Title</h2> <p>content</p> </div> <div> <h2>Post 2 Title</h2> <p>content</p> <div> <h3>Comment 1 Title</h3> <p>content</p> </div> </div> <div> <h2>Post 3 Title</h2> <p>content</p> </div> </body>

    But in XHTML 2.0, you can write this:

    <body> <h>Page Title</h> <p>content</p> <section> <h>Post 1 Title</h> <p>content</p> </section> <section> <h>Post 2 Title</h> <p>content</p> <section> <h>Comment 1 Title</h> <p>content</p> </section> </section> <section> <h>Post 3 Title</h> <p>content</p> </section> </body>

    This has several benefits. First, it allows you to mark up document fragments properly, even if you don't know where in the document tree they are going to fit. Second, it supports more than six levels of nesting (this is admittedly pretty useless for most people, but nice to have when you need it). Finally, it provides a nice, single, semantic way to structure web pages, which will hopefully speed up the demise of RSS feeds.
  • Oooh, me likey XHTML 2.0 :)
This discussion has been closed.