468,257 Members | 1,413 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,257 developers. It's quick & easy.

Image Button Problem in FireFox

Hi,

I am having a problem with an image button in FireFox.

Here is my button:

[HTML]<input name="Submit" type="image" src="'images/button.gif'" alt="The Button" border="0">[/HTML]

This image button works fine in IE, but in FF you can only click on the bottom half of the button or so. The top half is inactive.

I have never encountered this before, have you?

Remulon
Jan 24 '08 #1
9 4922
Even if I add the width and height of the image, it still acts the same in FF.

[HTML]<input name="Submit" type="image" src="'images/button.gif'" alt="The Button" width="190" height="38" border="0">[/HTML]
Jan 24 '08 #2
drhowarddrfine
7,435 Expert 4TB
It works fine for me in FF but I'm surprised what you show works at all because this is incorrect:
[html]src="'images/button.gif'"[/html]

Remove the extra single quotes.
Jan 24 '08 #3
ok.. my bad, those quotes aren't really there.. the image source is fed through by php, so I pasted the image source in there for the post..

here is something more puzzling...

I have been throwing in a couple of other buttons to troubleshoot this and at the moment I have 3 buttons in there and the code looks like this:

[HTML]<input name="Submit" type="image" src="images/button.gif" alt="The Button" width="190" height="38" border="0">

<input name="Submit" type="image" src="images/button.gif" alt="The Button" width="190" height="38" border="0">

<a href="#"><img src="images/SubmitOrder.gif" border="0"></a>[/HTML]

The first one is now fully functional, the second one is having the same problem, half active/half inactive, and we all know the bottom one does nothing. But if I take the bottom one out, the first one does the same thing as the second (half active/half inactive).
Jan 24 '08 #4
drhowarddrfine
7,435 Expert 4TB
I had an idea of what the problem was in your first post but I need to see your complete markup, including the css, to be sure. I would bet the problem is actually with IE.
Jan 24 '08 #5
ok.. I have PM'd you the link..
Jan 24 '08 #6
drhowarddrfine
7,435 Expert 4TB
The problem is caused by div.ip . It is overlapping the tops of the buttons but the buttons themselves work fine. I'm in my pajamas going to bed so you'll have to look into that.

Your doctype is not current but I don't know that it would affect this. It should be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Jan 24 '08 #7
Thanks doc..

I see that, now that I have the three buttons there, only part of the first one is inactive, the part below the ip class.

Will I have to either move the button down or adjust the height of the ip class?

Or is there any way that I can bring the button to the foreground?
Jan 24 '08 #8
drhowarddrfine
7,435 Expert 4TB
I'm stuck without my dev box so it's difficult for me to judge what needs to be done. IE is messing with that element improperly so it may be a matter of margins but I can't tell right now.

Perhaps adding to your css "outline:1px solid red" will help you see the problem better and you can play with it. I suggest looking into the possibility IE is expanding the div to contain any floated elements (incorrect behavior) or maybe the buttons are floated or absolutely positioned which will take them out of the normal flow causing them to rise up into the position.
Jan 25 '08 #9
No problem doc.

I have a quick fix:

The ip div had a padding-bottom:40px, I have removed it and added a padding-top:40px to the div that holds the button.

This fixes the overlap problem and keeps the same spacing between the button and the div above it.

Thanks for your help, it is much appreciated.
Jan 25 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

15 posts views Thread by Applebrown | last post: by
5 posts views Thread by Mark Woodward | last post: by
1 post views Thread by Phil_Cam | last post: by
3 posts views Thread by jackiepatti | last post: by
1 post views Thread by Chuck Anderson | last post: by
4 posts views Thread by =?Utf-8?B?YzY3NjIyOA==?= | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.