css positioning issue

[dynamyc]

Hi!
I have a button called “Contact us” which I want to position it on the right:
Here is the code:
HTML :

Contact us

CSS:

a.modal-contact_button {



/* Appearance */

background: #ccc;

color: #555;

text-shadow: 0 1px 0 #aaa;

border: 0;

text-decoration: none;

margin: 0 0 0 -4px;

padding: 12px 12px 12px 16px;



/* Position */

position: fixed;

right: 0;

top: 52%;

display: none;



}

My question is why is not exactly on the right because I’ve added “right:0;” also if I change it to “left:0;” it is positioned exactly on the left.
Here is the link
Thanks!

[TheDoc]

It appears to be on the right. Have you fixed it?

[Senff]

I assume you are checking it in Internet Explorer, where it is a little off.

The reason is that it’s positioned there, is because that’s where it’s positioned if you wouldn’t rotate it. So, what actually happens is that you first position it all the way to the right, and then you rotate it 90 degrees using the button’s LEFT side as the rotation point.

Other browsers, who support full CSS rotation, rotate with the center as the rotation point.

I would advise to not use the rotation thingie, but just create a vertical button and position it without rotating. That way you won’t have to deal with the different ways browsers rotate elements.

[Author]

Posts