0

I am using WordPress

I have a form that I'm writing from scratch. The label and input box are on one line, but there is a mysterious space between them (its not padding or margin).

I know that this spacing can be due to spacing between divs. I wrote the code so that the divs are rights next to each other:

<div class="appointment-field-name">Name</div><div class="appointment-field-input">[text* your-name]</div><div><div class="appointment-field-name">Service</div><div class="appointment-field-input">[text* your-service]</div></div>

(Note: the extra div around the second "appointment-field-name" and "appointment-field-input" is so that it aligns it with the div above. No idea why)

However, when it renders, both lines are separated (see HTML below)

Here is the html: (PLEASE NOTE: I know this isn't the cleanest way to code in HTML. However, I am showing EXACTLY what my browser is rendering, versus what I inputted in the back end. (see above code))

<div class="wpcf7" id="wpcf7-f29-o1" lang="en-US" dir="ltr">
    <div class="screen-reader-response"></div>
    <form name="" action="/#wpcf7-f29-o1" method="post" class="wpcf7-form" novalidate="novalidate">

    <div class="appointment-field-name">Name</div>
    <div class="appointment-field-input"><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></div>
    <div><div class="appointment-field-name">Service</div>
        <div class="appointment-field-input"><span class="wpcf7-form-control-wrap your-service"><input type="text" name="your-service" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></div></div>

</form></div>

Here is the CSS

.wpcf7 {
    margin: 0;
    padding: 0;
}

.appointment-field-name {
    padding: 9px 0px;
    margin-bottom: 20px;
    text-align: center;
    color: #ffffff;
    background-color: #002d80;
    font-size: 142.86%;
    width: 240px;
    display: inline-block;
    vertical-align: top;
}

.appointment-field-input {
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.wpcf7-text {
    padding: 11px 20px;
    background-color: #D5DFF2;
    font-size: 120%;
    width: 100%;
}

input { border: 0; }

span.wpcf7-form-control-wrap {
position: relative;
}

And here is the fiddle: http://jsfiddle.net/4nkydy76/2/

How do I remove this space so that the input box is flush against the label?

Thank you for your time!

NOTE: To address the duplicate question problem: as I mentioned in my post, I know that the spacing is due to spaces between the divs in the code (as was the answer in the cited duplicate question). My problem is that WordPress is rendering my code differently, even though I eliminated any spaces between divs (see the first piece of code in this post). Thank you.

Tara
  • 251
  • 1
  • 5
  • 17
  • The answer to the question is to remove the space between the block elements. I did that, but it renders so that there is space between the block elements. This question is a little different. Thanks though! :) – Tara Aug 14 '14 at 15:01
  • So I removed the spaces between the DIVs, and it seems to work now?... is this a fiddle issue? http://jsfiddle.net/4nkydy76/3/ – Daniel Sanchez Aug 14 '14 at 15:04
  • It does work. I'm using WordPress and a contact form plugin so it's rendering the code differently than I am writing it in the back end. – Tara Aug 14 '14 at 15:05
  • Your fiddle doesn't look right to me, they're not aligning to the top like the CSS states they should. I had a little look, and definitely thought there was something strange happening. – Lee Aug 14 '14 at 15:07
  • If nothing else works, you can always slap a negative margin on one of the appointment field classes. – Daniel Sanchez Aug 14 '14 at 15:14
  • I'll probably end up doing that. Just wanted to see if there was any other way that wasn't a hack. Thanks, Daniel :) – Tara Aug 14 '14 at 15:17

0 Answers0