Image Button Problem in FireFox

New Member

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

7,435

Recognized Expert Expert

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

New Member

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

7,435

Recognized Expert Expert

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

New Member

ok.. I have PM'd you the link..

Jan 24 '08 #6

7,435

Recognized Expert Expert

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

New Member

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

7,435

Recognized Expert Expert

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

CSS text and image rollovers: two issues

New Member

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

Similar topics

3040

by: Applebrown | last post by:

I've got a couple of errors on my site that I'm not sure how to fix. I'm using simple CSS for both text rollovers and my horizontal navbar, and here's what happens. First, the site: ...

HTML / CSS

3305

image map test page - won't work in IE6 or FF

by: lofty00 | last post by:

hello, sorry about the repost - I've been posting to several groups and I've decided it's better to make a single repost to all of them rather than an extra post in each. I've been trying to...

input type="image" $_POST queries

7898

by: Mark Woodward | last post by:

Hi all, I'm trying to set up a 'control panel' consisting of a table of icons. The early stages: http://www.deepinit.com/controlcentre.php Each of these is set up like: <td> <input...

PHP

6114

Change image button type problem in IE

by: Phil_Cam | last post by:

Hello All On a webpage I have a standard paypal image button for purchases. I am trying to set it up so that it only shows up or is endabled when text is entered into a textbox and a button is...

x,y coordinates from an <input type='image'>

21241

by: jackiepatti | last post by:

QUESTION: I have a web page containing a form that contains an image instead of a submit button, e.g. <form name='myform' action='get' method='otherpage.asp'> <input type='image'...

Image button shows outline when clicking in FireFox

2223

by: Charlie | last post by:

Hi: When you click image button in Firefox, a thin, gray dotted line appears around image. Is there a way to get rid of this? Thanks, Charlie

ASP.NET

3395

Changing image source stops working

by: Chuck Anderson | last post by:

I'm using a simple, pseudo progress bar. Very simply, I display a still image next to a form submit button until the user clicks on it, and then I change the image source to an animated version of...