Form throws out image display

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
enhancer
Forum Newbie
Posts: 4
Joined: Tue Nov 30, 2010 12:57 am

Form throws out image display

Post 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!
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Form throws out image display

Post by social_experiment »

Could you please paste the relevant CSS code
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
enhancer
Forum Newbie
Posts: 4
Joined: Tue Nov 30, 2010 12:57 am

Re: Form throws out image display

Post 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!
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Form throws out image display

Post 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
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
enhancer
Forum Newbie
Posts: 4
Joined: Tue Nov 30, 2010 12:57 am

Re: Form throws out image display

Post by enhancer »

Here's the image: Image

IE is the browser. Thanks!
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Form throws out image display

Post 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
}
Attachments
Display in IE
Display in IE
image_0.jpg (17.31 KiB) Viewed 16596 times
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
enhancer
Forum Newbie
Posts: 4
Joined: Tue Nov 30, 2010 12:57 am

Re: Form throws out image display

Post 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.
Post Reply