JQuery Mobile Flip Switch Toggle Alignment Issue

When I first found JQuery mobile, I thought I had found heaven on Earth.  Combining JQuery mobile with ASP.net MVC4 was so freaking AWESOME!  What I could do seemed limitless… Until stupid BS like the problem I’m blogging about here brought me right back down to earth.

The Problem: The toggle switch on the Flip Switch Toggle componet of JQuery Mobil was misaligned.  Here is a pic:

Image may be NSFW.
Clik here to view. For those of you who haven’t worked with someone in a Marketing department, that may not seem like a big deal.

To Someone in Marketing… this was a complete failure and worth throwing a fit over.  No offense to marketing people, because without them we “may” not have any clients.

The Solution: I found a great link on Google to a conversation on GitHub (https://github.com/jquery/jquery-mobile/issues/5621) where one of the developers bitches about nesting the control in a table (which seems rediculous to me) and then throws the guy a bone in the form of a CSS fix.  Here is the CSS fix:

table div.ui-slider::before, div.ui-slider::after {

display: block;

}

Here is what the above image looked like after the fix:

Image may be NSFW.
Clik here to view. I am once again the hero.

CSS Positioning Vs. Tables: Maybe I’m just old, but tables still rock!  I like to mix CSS and tables to get the rigidity and % width stuff out of tables along with the macro-precision of CSS.  Why do peeps gotta be #haterz?

Capt. Rochefort (Sorry for the #haterz statement above, I blame it on the coffee)

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.