WordPress.org

Ready to get started?Download WordPress

Forums

Mail Subscribe List
Move text field and submit button to the same line? (2 posts)

  1. amandyrae
    Member
    Posted 11 months ago #

    I feel like a dummy for not being able to figure this out, but I cannot get the text field where the user types their email address to be on the same line as the submit button. I tried various floats in CSS, deleting page breaks in the PHP, and no matter what I do the submit button is always below the text field instead of where I want it to be—right after the text field on the same line.

    I was able to get the submit button on the same line by using "float: right" in CSS and applying a negative top margin, but of course that doesn't line up correctly in every browser.

    Any ideas?

    http://wordpress.org/extend/plugins/mail-subscribe-list/

  2. aliferis
    Member
    Posted 9 months ago #

    This is my css for this - some of it you may not want tho

    .sml_subscribe p {
      display:inline;
    }
    .sml_subscribe .prepend {
      display:none;
    }
    .sml_subscribe .signup {
      width:120px;
      float:left;
      background-color:#67bca1;
      padding:0px 9px 3px 9px;
      text-indent:17px;
      color:white;
      background-image:url(/wp-content/uploads/2013/09/share.gif);
      background-repeat:no-repeat;
      background-position:3px 4px;
      margin-right:9px;
    }
    form input.sml_emailinput {
      background-color:transparent;
      border: 1px solid #67bca1;
      width:120px;
      height:14px;
      float:left;
      margin-right:9px;
      color:#67bca1;
    }
    form input.sml_submitbtn {
      background-color:transparent;
      border: 1px solid #67bca1;
      width:60px;
      height:22px;
      float:left;
      text-align:center;
      color:#67bca1;
    }
    .sml_subscribe .signup,
    form input.sml_emailinput,
    form input.sml_submitbtn {
      -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    }
    /* labels positioning */
    form .sml_emaillabel {
      padding-top:4px;
    }

Reply

You must log in to post.

About this Plugin

About this Topic