Grow your CSS skills. Land your dream job.

css positioning issue

  • # April 23, 2012 at 3:26 pm

    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!

    # April 23, 2012 at 4:02 pm

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

    # April 23, 2012 at 4:50 pm

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".