Image is blowing up huge for no apparent reason

Here’s the HTML surrounding the image:

<input type="hidden" name="userid" value="4979240" /> <input type="hidden" name="product" value=" ABCs in the Porkies" /> <input type="hidden" name="price" value="15.00" /> <input type="image" src="http://porkies.org/wp-content/uploads/2011/08/add-to-cart.jpg" width="99" height="40" alt="Add to Cart" />

I’ve added the height and width to try to force it to maintain its original size, but it’s not helping. It’s probably 4 to 5 times larger. Can anyone tell what’s making it do that? I’d give a link but the site is down for maintenance right now, but if anyone is willing to take a look privately, I’d appreciate it, unless you can tell from the code I’ve pasted.

What CSS do you have defined for the input tags?

I haven’t put any custom code in so it’s just the default, I assume. I can do that, though - would it be something like this?

.custom img {
width: 99px;
height: 40px;
}

I did try that before I posted this reply and it shrunk my other images, not the buttons I wanted shrunk, incidentally.

No it wouldn’t be since it is an input tag and not an image tag.

You possibly have some CSS for styling the width of other input fields that you need to override for the image one.

Do you have any idea what I should look for? Or is that too specific to each individual site?

You could go through your style sheets (since you prolly are stuck with several) and do a search in your browser or text editor for
input

and while slow you should be able to see all styles being given to all inputs. If any have dimensions listed then you’ll notice them, and likely they are large (possibly only a width, and the image might be scaling its height to match).

In many browsers, you c right-click on the element and click Inspect Element (best done with Firebug addon for Firefox). That will show you all the styles applying to the element, and what style sheet they are in.

[EDIT: thread moved to CSS forum.]

Hi,

As others have said you have set a size for inputs somewhere which will over-ride the size of the input type= image even if you add attributes.

Just add a class to the input and reset the dimensions to auto.


input.inputimage{
    width:auto!important;
    height:auto!important
}


<input [B]class="inputimage"[/B] type="image" src="http ... etc...

Or if you don’t care about IE6 then do this:


input[type=image]{
    width:auto!important;
    height:auto!important
}


No class needed.

You guys are the best - that worked. Thank you very much! Every time I learn something new about CSS, I’m keeping track in a file so I won’t have to bug anybody the next time I run across it.

Thanks again :slight_smile: