Why the rotate does not work on chrome

I think i need to rebrand this blog as a general web development blog.
The case today is about the css property to rotate an element, for good measure this is the code for all browsers to rotate elements

#yourelement {
  -moz-transform: rotate(180deg)
  -o-transform: rotate(180deg) 
  -webkit-transform: rotate(180deg)
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos(180deg)}, M12=-#{sin(180deg)}, M21=#{sin(180deg)}, M22=#{cos(180deg)})
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos(180deg)}, M12=-#{sin(180deg)}, M21=#{sin(180deg)}, M22=#{cos(180deg)})"
  zoom: 1
} 

So thats the code to rotate an element 180 degrees, i used it to rotate a bang ! sing because in spanish you need the rotated version to start a sentence.
If chrome refuses to work using this line

-webkit-transform: rotate(10deg);

You are probably tring to target an inline element, this could be a inline element by default so i solved my problem enveloping what i wanted to rotate in a div, and setting its display property to inline.
And thats it. have fun! 
UPDATE:
The sass mixing to rotate an element

@mixin rotate($degrees)
  -moz-transform: rotate($degrees)
  -o-transform: rotate($degrees) 
  -webkit-transform: rotate($degrees)
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})"
  zoom: 1

And you would use it like this

@include rotate(90deg)

Dont forget to import them if you have the mixins in another file!

How to submit a form with a click on an arbitrary element.

This is real live code for Bandtastic.me
What i wanted to accomplish was a clickable div with a text box in it that submits a form, this is to bypass the limitations of a regular form that needs a submit button.
I'm posting this because it was a real pain to get this functionallity and i hope somebody can save itself the trouble.

So you have a div with a textbox in it, roughly this







And you want to be able to submit the contents of the textbox as a regular html form.

<form method='GET' action='/post' id='myform'>
    <input  type='text' id='mytextbox' value='100' />
</form>

Something like that, so no button anywhere to be found.
You can style your form as a regular div, like i did in the screenshot.
Now the magic would rely on jquery so remember to include it in your html and then would be this

$(function(){ 

   $('.custom_contribution *').click(function(event){
        event.stopImmediatePropagation()
        if(! $(event.currentTarget).is('input#custom_ammount')){
            $('.custom_contribution').submit();
        }
    }); 
})

Lets analyze this
First we target all the elements on our form using the *, so when any or subelement can be used to submit the form

   $('.custom_contribution *').click(function(event)(

Then we stop the propagation of the event so if there are elements underneath that jquery also considers clicked we only get one

        event.stopImmediatePropagation()

Then we check with if the clicked element is not our textbox

        if(! $(e.currentTarget).is('input#custom_ammount')){ 

We do this converting the dom element that e.currenTarget returns to a jquery object surrounding it with

$()

we do this so we can the use

is()

method that will return true if the element is our textbox, and because we have a boolean negation ! the next line of code only will run if we clicked anything but the textbox.
We submit the form with another handy jquery method.

            $('.custom_contribution').submit();

This allow us to have a huge clickable button while mantaining the form functionality, because if you type something in the textbox and then hit enter, it will also submit it.
Thats it, if you have any questions or remarks leave a comment.

Facebook chat is not loading

Troubleshotting Facebook code
Any Facebook code got in https://developers.facebook.com/docs/plugins/ such as:

• Like Button 
• Send Button
• Subscribe Button 
• Comments 
• Activity Feed
• Recommendations 
• Like Box 
• Login Button
• Registration 
• Facepile
• Live Stream 

That stops working, check these things:

• First go to the facebook debugger and input the problematic url, sometimes just doing it, fixes problems such as wrong meta data or wrong likes numbers.
• Is the required Javascript sdk in the header of your site? it doesnt work if you move it to the bottom
• Is the code copy pasted right, some template systems can mess your code, so make sure yours get the appropriate VERBATIM, :plain or whatever tag your templating system uses to pass textual content.
• Are your running the code on the same url the code is configured in.
• Is the code inside a div or an element with an id, this can be tricky to spot, but some Facebook code requires some css selecting that can be messed up if you put it inside an html element with an id.
• Any other common mistakes, please post them in the comments.

Fixing facebook on firefox

If you use Firefox and the new Facebook photo display mode the photos are out of place, and by out of place i mean they are wrongly placed.
Go get the stylish addon and add this rule for facebook:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("facebook.com") {
   .stage img{
      position:relative;
      top: -100%;
   }
}