Can’t get CSS alignment of an image to work

0 Views

I am working on this page:

http://g33ktalk.com/etsy-a-deep-dive-into-monitoring-with-skyline/

Read More

and you see how towards the bottom, the image to subscribe doesn’t have padding and touches the divs.

I tried to do something like this: 

#gform_submit_button_8
{
    padding-left: 15px;
}

But that had no effect. I also tried to add padding to the class gform_footer but it also had no effect. Would anyone know how to add padding to the left side of that image?

EDIT:

This is the larger HTML in which this image is in 

<div class='gf_browser_chrome gform_wrapper' id='gform_wrapper_8' >
  <form method='post' enctype='multipart/form-data' id='gform_8' action='/etsy-a-deep-dive-into-monitoring-with-skyline/'>
    <div class='gform_heading'>
      <h3 class='gform_title'>Subscribe to our YouTube Channel</h3>
      <span class='gform_description'>Want to get more tech talks? Subscribe to our YouTube channels and get notified when new talks are posted.</span>
    </div>
    <div class='gform_body'>
      <ul id='gform_fields_8' class='gform_fields top_label description_below'>
      </ul>
    </div>
    <div class='gform_footer top_label'>
      <input type='image' src='http://g33ktalk.com/wp-content/uploads/2012/10/subscribe.gif' id='gform_submit_button_8' class='gform_image_button' alt='Submit' tabindex='1' />
...

Thanks!

Post Views: 0

Related posts

Leave a Reply

3 comments

  2. Usualy when i faced this kind of problem i check my whole css.
    Try to use bootstarp as it they have div’s which will shift your content to the specific locatio on page.
    some times we can not say that what we did wrong with CSS so what I usually do is to try to test it with Firebug(firefox) or chrome (DEV tools). or with http://cssdesk.com/ for testing my pages.

  3. The key is to make the selector specific enough to override any subsequent CSS rules that may follow.

    I would not use !important, instead, I would try something like:

    div.gform_wrapper .gform_footer {
    padding: 16px 0 10px 0;
    margin: 16px 0 0 0;
    clear: both
}