Grow your CSS skills. Land your dream job.

Keeping checkbox and CSS rollover link on same line

  • # November 16, 2009 at 12:25 pm

    I am coding a registration form. The user needs to agree to the “Privacy Policy” of the site.

    I coded a checkbox with some text. At the end of the text I am trying to put a link (CSS roll over) so the user can view the “Privacy Policy”

    The problem I am having is that the link is being shown on the next line. Without any other coding it is on the next line/left.

    I have put the link in front of the check box, same problem, shows on different lines.

    I used “float:right;” in the style sheet for the rollover and it does “float right”… on the next line.

    I used the <div align="right"> on the link, it does line it up to the right… on the next line.

    How do I keep it all on the same line?

    Sorry. I don’t have a live example.

    I don’t know if my problem can be fixed in the HTML or CSS. I posted both.

    This is the coding I am using for the checkbox and link:

    Code:
     I have read, understand and agree with the < ?php echo ($company_name)?> “Privacy Policy”*Privacy Policy

    This is what I am using for the css rollover:

    Code:
    #pp
    {
    display: block;
    width: 78px;
    height: 12px;
    float:right;
    background: url(“../images/privacy.png”) no-repeat 0 0;

    }

    #pp:hover
    {
    background-position: 0 -12px;
    }

    #pp span
    {
    display: none;
    }

    Everything works except that I can’t keep it on the same line. Help!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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