Span elements with the classes karma_buttons and karma_score are deemed invalid by the XHTML Markup Validator. The karma form, once opened, needs a wrapper div to get rid of these errors and provide better CSS customization.

Comments

mercmobily’s picture

mercmobily commented

Hi,

Please be a little clearer. I am not very good at CSS & C. What I do know, though, is that the karma form is _extremely_ complex code-wise, and I am only going to do minor, necessary, CAREFUL adjustments...

THANK YOU for your help!

Merc.

zwaldowski’s picture

zwaldowski commented

Yeah, I noticed that it's a bit fragile... while I look for it in the code, a good place to check out the markup would be http://www.drigg.org .

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.drigg.org%2F

In fact, it looks like there just needs to be a reversal. Here's an example off of drigg.org:

        <div class="extra_voting_forms karma_3_big">

        <form action="/extra_voting_forms/handle" method="get" class="karma_form_promoted" id="x1896">
          
          <span class="karma_score">2</span>
          <span class="karma_buttons">
            <label class="karma_up_not_clicked_clickable" for="u1896">
              <input id="u1896" type="radio" name="karma_vote" value="1"/>
              <span>Up</span>
            </label>
            <label class="karma_down_not_clicked_clickable" for="d1896">

              <input id="d1896" type="radio" name="karma_vote" value="-1"/>
              <span>Down</span>
            </label>
            <input type="hidden" name="oid" value="1896"/>
            <input type="hidden" name="otype" value="n"/>
            <input type="hidden" name="form_style" value="3_big"/>
            <input type="hidden" name="form_type" value="form"/>
            <input type="submit" name="submit" value="Vote" />

            <input type="hidden" name="js_destination" value="Announcements%2FBonjour_bay" />
          </span>
        </form></div>

It should probably become:

        <form action="/extra_voting_forms/handle" method="get" class="karma_form_promoted" id="x1896">
        <div class="extra_voting_forms karma_3_big">
          
          <span class="karma_score">2</span>
          <span class="karma_buttons">
            <label class="karma_up_not_clicked_clickable" for="u1896">
              <input id="u1896" type="radio" name="karma_vote" value="1"/>
              <span>Up</span>
            </label>
            <label class="karma_down_not_clicked_clickable" for="d1896">

              <input id="d1896" type="radio" name="karma_vote" value="-1"/>
              <span>Down</span>
            </label>
            <input type="hidden" name="oid" value="1896"/>
            <input type="hidden" name="otype" value="n"/>
            <input type="hidden" name="form_style" value="3_big"/>
            <input type="hidden" name="form_type" value="form"/>
            <input type="submit" name="submit" value="Vote" />

            <input type="hidden" name="js_destination" value="Announcements%2FBonjour_bay" />
          </span>
        </div> </form>
mercmobily’s picture

mercmobily commented

Hi,

This is a pretty big change... can you please confirm that the default theme still looks right after making it?
No side effects?

Merc.

zwaldowski’s picture

zwaldowski commented

It's not that bad of a change, although it is a change.

In extra_voting_forms.module, from lines 1200 to 1275 (approximately), the actual switches need to be made. A couple of things need to be switched around in the extra_voting_forms_*.css files in the widgets folders, but they're mostly uniform changes in the order of classes karma_form (and karma_form_promoted) with classes extra_voting_forms and karma_(number)_(big/small).

To answer your question, it does require a couple of changes. However, it does make the extra_voting_forms always and forever XHTML compliant (always good, but not needed). To be honest, it would be better to make these sorts of changes before we add more themes, more widget styles, and more complexities. I would write the changes that need to be done, but I have a trip tomorrow.

mercmobily’s picture

mercmobily commented

Hi,

When are you back from your trip?
I would love to receive a list of changes, because I will most definitely stuff everything up.

Bye,

Merc.

zwaldowski’s picture

zwaldowski commented

Soon. I just got a moment to check this... I'll be back tomorrow.

sikjoy’s picture

sikjoy commented
Assigned: Unassigned » sikjoy

accepting assignment

sikjoy’s picture

sikjoy commented

Hmmm, this does open up a can of worms. There are actually 3 forms in the extra_voting_forms.module that need altering: @ lines 1238, 1262, and 1291. Next, I went into the extra_voting_forms_all.css file and changed the specificity ordering for all instances of karma_form and karma_form_promoted to match the xhtml change. There's definitely more too it than that, as now the widget is broken. :-(

--sicjoy

mercmobily’s picture

mercmobily commented

Hi,

Sicjoy, I think the voting javascript will suffer as well if you change that.
Question: are you absolutely sure that the XHTML validity is indeed broken? Is a div around the form actually a problem? Surely...

I guess the question is: What's the _easiest_ way to fix this?

Merc.

mercmobily’s picture

mercmobily commented

Hi,

Just to add... I am actually happy to mark it as won't fix if the fix requires major work, breaking a lot of things, etc.

Merc.

zwaldowski’s picture

zwaldowski commented

If it would require truly *major* alterations and such, by all means mark it as won't fix. I just suggested this along with as all of the other XHTML bugs were being tackled and fixed. I was thinking of the future, though, in reporting this bug. It'd be better to make this change now than when Drigg gets integrated in a ton of designs.

But... if it really damages voting and such... meh, don't worry about it :-P .

EDIT: Looking into the actual validation error, it really just doesn't like the span elements. Those could be wrapped in < p > or < div >, or have the entire set of spans in a single div. Positively, it could add another layer of CSS customization to the buttons themselves. Easy fix!

EDIT2: Here's how it'd be in my now-outdated example from above:

        <div class="extra_voting_forms karma_3_big">

        <form action="/extra_voting_forms/handle" method="get" class="karma_form_promoted" id="x1896">
          
          <span class="karma_score">2</span>
          <span class="karma_buttons">
            <label class="karma_up_not_clicked_clickable" for="u1896">
              <input id="u1896" type="radio" name="karma_vote" value="1"/>
              <span>Up</span>
            </label>
            <label class="karma_down_not_clicked_clickable" for="d1896">

              <input id="d1896" type="radio" name="karma_vote" value="-1"/>
              <span>Down</span>
            </label>
            <input type="hidden" name="oid" value="1896"/>
            <input type="hidden" name="otype" value="n"/>
            <input type="hidden" name="form_style" value="3_big"/>
            <input type="hidden" name="form_type" value="form"/>
            <input type="submit" name="submit" value="Vote" />

            <input type="hidden" name="js_destination" value="Announcements%2FBonjour_bay" />
          </span>
        </form></div>

Becomes:

        <div class="extra_voting_forms karma_3_big">
        <form action="/extra_voting_forms/handle" method="get" class="karma_form_promoted" id="x1896">
            <div>
                <span class="karma_score">2</span>
                <span class="karma_buttons">
                    <label class="karma_up_not_clicked_clickable" for="u1896">
                        <input id="u1896" type="radio" name="karma_vote" value="1"/>
                        <span>Up</span>
                    </label>
                    <label class="karma_down_not_clicked_clickable" for="d1896">
                        <input id="d1896" type="radio" name="karma_vote" value="-1"/>
                        <span>Down</span>
                    </label>
                    <input type="hidden" name="oid" value="1896"/>
                    <input type="hidden" name="otype" value="n"/>
                    <input type="hidden" name="form_style" value="3_big"/>
                    <input type="hidden" name="form_type" value="form"/>
                    <input type="submit" name="submit" value="Vote" />
                    <input type="hidden" name="js_destination" value="Announcements%2FBonjour_bay" />
                </span>
            </div>
        </form></div>

That seems to fix all. Semantically, the hidden inputs could be moved out of the div and span... but I'm not sure that changes a thing.

mercmobily’s picture

mercmobily commented

Hi,

Sicjoy, can you confirm that this actually works?

Merc.

sikjoy’s picture

sikjoy commented

Hi,

I tested this on 5.x-Dev for both big and small style voting forms and it doesn't break the widget.

Nice work ZW!

--sicjoy

mercmobily’s picture

mercmobily commented

Hi,

Sicjoy, can you please apply the change to extra_voting_form and mark this as fixed?
I am so excited... drigg now validates as XHTML!!!

Bye!

Merc.

mercmobily’s picture

mercmobily commented
Status: Active » Fixed

Hi,

I looked at the code, I am 99.999% sure this is fixed.
Emailing sicjoy just in case. But, marking it as fixed!

Merc.

Anonymous’s picture

Anonymous (not verified) commented
Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.