By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

Image Button Problem in FireFox

P: 6
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
Share this Question
Share on Google+
9 Replies


P: 6
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
Expert 5K+
P: 7,435
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

P: 6
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
Expert 5K+
P: 7,435
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

P: 6
ok.. I have PM'd you the link..
Jan 24 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
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

P: 6
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
Expert 5K+
P: 7,435
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

P: 6
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.