?
Solved

CSS problem

Posted on 2011-10-19
9
Medium Priority
?
179 Views
Last Modified: 2012-05-12
I have the below code - I am trying to style the labels contained ONLY in the div ID from the code below, but cannot get the style to take

I am trying
#form-container label { display: block;padding-left:300px;}
#form-container form label { display: block;padding-left:300px;}

but nothing is working. Any  ideas?

<div id ="form-container">
<div style="width:400px;height:auto;padding-left:30px;float:left;">
  <form id="ValidationShellForwardForm" method="post" action="/forward" accept-charset="utf-8">
    <div style="display:none;">
      <input type="hidden" name="_method" value="POST" />
      <input type="hidden" name="data[_Token][key]" value="" id="Token1163062533" />
    </div>
    <fieldset class="top">
      <div class="input text required">
        <label for="PersonEmail">Your Address</label>
        <input name="data[Person][email]" type="text" maxlength="64" id="PersonEmail" />
      </div>
      <div class="input text required">
        <label for="PersonFullName">Your Name </label>
        <input name="data[Person][full_name]" type="text" id="PersonFullName" />
      </div>
    </fieldset>
    <div class="input checkbox">
      <input type="hidden" name="data[PersonContactPrefSubscription][is_subscribed_to_newsletter]" id="PersonContactPrefSubscriptionIsSubscribedToNewsletter_" value="0" />
      <input type="checkbox" name="data[PersonContactPrefSubscription][is_subscribed_to_newsletter]" value="1" id="PersonContactPrefSubscriptionIsSubscribedToNewsletter" />
    </div>
    <div class="submit">
      <input type="image" src="/hp_events/img/ftaf/submit-button.jpg" />
    </div>
    <div style="display:none;">
      <input type="hidden" name="data[_Token][fields]" value="c0f75432d96b04d0b5b62d7efcb6ef34cb20ae08%3An%3A0%3A%7B%7D" id="TokenFields1188492735" />
    </div>
  </form>
</div>

Open in new window

0
Comment
Question by:lvollmer
  • 5
  • 4
9 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36995431
In your code, your missing a closing div tag at the bottom. Not sure if this is the full page or just a snippet.  

Also, you may wish to target more directly.
 
#form-container form#ValidationShellForwardForm label { display: block;padding-left:300px;}

Open in new window

0
 

Author Comment

by:lvollmer
ID: 36995448
that is just a snippet, let me give this a whirl
0
 

Author Comment

by:lvollmer
ID: 36995504
that kind of worked. it didn't style anything under the heading : free shipping, everything above that was styled appropriately however

<div id ="form-container">
          <div style="width:400px;height:auto;padding-left:30px;float:left;">
            <h3 style ="margin:0">Your Info</h3>
            <form id="ValidationShellForwardForm" method="post" action="/shutterflyfriends/forward" accept-charset="utf-8">
              <div style="display:none;">
                <input type="hidden" name="_method" value="POST" />
                <input type="hidden" name="data[_Token][key]" value="984a12c077016ed641483fa9a8f4c1a3031ab4dc" id="Token1104994818" />
              </div>
              <fieldset class="top">
                <div class="input text required">
                  <label for="PersonEmail">Your Email Address</label>
                  <input name="data[Person][email]" type="text" maxlength="64" id="PersonEmail" />
                </div>
                <div class="input text required">
                  <label for="PersonFullName">Your Name </label>
                  <input name="data[Person][full_name]" type="text" id="PersonFullName" />
                </div>
                <h3 style = "margin:0"> free shipping
                  <label for="ValidationShellFriends0">Friend #1</label>
                  <input name="data[ValidationShell][friends][0]" type="text" id="ValidationShellFriends0" />
                </h3>
                <div class="input text">
                  <label for="ValidationShellFriends1">Friend #2</label>
                  <input name="data[ValidationShell][friends][1]" type="text" id="ValidationShellFriends1" />
                </div>
                <div class="input text">
                  <label for="ValidationShellFriends2">Friend #3</label>
                  <input name="data[ValidationShell][friends][2]" type="text" id="ValidationShellFriends2" />
                </div>
                <div class="input text">
                  <label for="ValidationShellFriends3">Friend #4</label>
                  <input name="data[ValidationShell][friends][3]" type="text" id="ValidationShellFriends3" />
                </div>
                <div class="input text">
                  <label for="ValidationShellFriends4">Friend #5</label>
                  <input name="data[ValidationShell][friends][4]" type="text" id="ValidationShellFriends4" />
                </div>
              </fieldset>
              <div class="input checkbox">
                <input type="hidden" name="data[PersonContactPrefSubscription][is_subscribed_to_newsletter]" id="PersonContactPrefSubscriptionIsSubscribedToNewsletter_" value="0" />
                <input type="checkbox" name="data[PersonContactPrefSubscription][is_subscribed_to_newsletter]" value="1" id="PersonContactPrefSubscriptionIsSubscribedToNewsletter" />
                &nbsp; Please send me occasional emails about House Party, Inc., including early notice about other free events that I can apply to host!</div>
              <div class="submit">
                <input type="image" src="/hp_events/img/ftaf/submit-button.jpg" />
              </div>
              <div style="display:none;">
                <input type="hidden" name="data[_Token][fields]" value="c0f75432d96b04d0b5b62d7efcb6ef34cb20ae08%3An%3A0%3A%7B%7D" id="TokenFields547344472" />
              </div>
            </form>
          </div>
          </div>
        </div>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 2000 total points
ID: 36995594
Ok, let's try this:

#form-container form#ValidationShellForwardForm>label

Open in new window

0
 

Accepted Solution

by:
lvollmer earned 0 total points
ID: 36995630
Like so? this did not work either. rendered the same output
#form-container form#ValidationShellForwardForm>label {display:block;padding-left:300px;}

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
ID: 36995661
Do you have a live URL you can share? There has to be something else going on that we're not seeing
0
 

Author Comment

by:lvollmer
ID: 36995691
I don't, it's a testing site.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36995711
Everything I'm using is working fine. All of my suggestions I posted above work as well. I'm honestly not sure what else we can do unless we see a live URL of the issue.
0
 

Author Closing Comment

by:lvollmer
ID: 37016630
it works standalone, so I will figure out the conflict. thanks
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question