Page 1 of 1

Form throws out image display

Posted: Tue Nov 30, 2010 1:03 am
by enhancer
Hi there,

Noob here, so please go easy!

I'm trying to implement a simple newsletter plugin to a PHP site template, code is below:

Code: Select all

<form method="post" action="http://oi.vresp.com?fid=4b561587d0" target="vr_optin_popup">
                        <table cellpadding="0" cellspacing="0">
                              <tr>                                  
                                    <td><input name="email_address" class="field"/></td>
                                    <td><input type="image" name="go" src="<?=$img_dir?>/newsletter-input-button.png" alt="Go" class="form-imagebutton"/></td>
                              </tr>
                        </table>
                      </form>
Everything works as expected, and the layout & image displays perfectly without the "form" tags, but when they "form" tags are included, they throw the image out & put a border around it. (There's a reference to my CSS page for class "field", and the image is in the correct directory).

Anybody able to help out please? Thanks!

Re: Form throws out image display

Posted: Tue Nov 30, 2010 8:50 am
by social_experiment
Could you please paste the relevant CSS code

Re: Form throws out image display

Posted: Tue Nov 30, 2010 5:46 pm
by enhancer
Hi,

Here's the related CSS code:

Code: Select all

.newsletter .field {
  background:url(../images/newsletter-input-bakground.png) no-repeat; width:146px; height:26px;
  border:0px; font-size:12px; padding-left:10px;
}

.form-imagebutton { margin-top:1px;}
I thought it might be the .form-imagebutton class that throws out the image, but commenting this out makes no difference. BTW, that class is in an ie.css file created by the template to ensure IE handles the image correctly (thought that might help).

Thanks!

Re: Form throws out image display

Posted: Wed Dec 01, 2010 11:14 am
by social_experiment
I checked out the code and added a custom image, everything looks ok, add your image for upload and also which browser is displaying the form incorrectly

Re: Form throws out image display

Posted: Wed Dec 01, 2010 5:47 pm
by enhancer
Here's the image: Image

IE is the browser. Thanks!

Re: Form throws out image display

Posted: Thu Dec 02, 2010 1:00 am
by social_experiment
Thanks, i've added it in and the results is the attached image. Also, i've found something in the syntax (css) that might be causing the problems. Your original code does not have a comma between the class declarations of newsletter and field so your browser might be thinking "Look for class field inside class newsletter". Add the comma between them and see what happens (unless you have a class field inside a class newsletter).

Code: Select all

.newsletter, .field {
 // css syntax
}

Re: Form throws out image display

Posted: Thu Dec 02, 2010 8:34 pm
by enhancer
Hi social_experiment,

Thanks for all your help with this; I tried isolating just the code and got the same result, but even with the comma it still displays with a border for some reason. Must be inheriting something via CSS...

I ended up creating a custom class and put the button inside it:

.button {
border:0px; padding:0px; background:none;
}

That did the trick.

Thanks for the replies, it helped me out immensely!

Cheers.