Image appears too big on webpage

[adminmax]

Hello!

Im just getting started with websites and everything and this seem to
be very basic.... but for the life of me i cannot see where the
problems comes from!

When i put a paypal donate button on my page, it appears 3x bigger,
all pixelated. then if i right click on the image and "view image", it
appears just the right size...

I got the code from the paypal website so i dont think its coming from
there...

Maybe from my css image settings?

#content img, #contentwide img, #contentfull img {
padding:1px;
display:inline;
background:#cccccc;
color:#303030;
border:4px solid #f0f0f0;

But i tried to change those and nothing happened... :s

Thanks

 

[Jonathan N. Little]

Hello!

Im just getting started with websites and everything and this seem to
be very basic.... but for the life of me i cannot see where the
problems comes from!

When i put a paypal donate button on my page, it appears 3x bigger,
all pixelated. then if i right click on the image and "view image", it
appears just the right size...

I got the code from the paypal website so i dont think its coming from
there...

Maybe from my css image settings?

#content img, #contentwide img, #contentfull img {
padding:1px;
display:inline;
background:#cccccc;
color:#303030;
border:4px solid #f0f0f0;

But i tried to change those and nothing happened... :s

Are you using "width" and "height" attributes that are 3x the actual
image size perhaps? A URL would have provided a definitive answer.

 

[adminmax]

What the hell is a "paypal donate" button?

Anyway, somewhere else in your mystical page is a height and/or width
parameter for the "img" attribute. Best to set accurate dimensions
css-wise on the id of the img you're referring to.

Hello! paypal donate button is to allow visitors to make a donation
through paypal... may be my wording is wrong.

back to the image: there is no width and height attribute set, and
when i try to set them somehow the width doesnt work only the height
changes :S here is the code of the image:

<input type="image" src="https://www.paypal.com/en_US/i/btn/
btn_donate_LG.gif" border="1" name="submit" alt="PayPal - The safer,
easier way to pay online!">

i tried to put it like this : <input type="image" src="https://
www.paypal.com/en_US/i/btn/btn_donate_LG.gif" width="92" height="26"
border="1" name="submit" alt="PayPal - The safer, easier way to pay
online!">

The height got perfect but somehow whatever value i put in width,
nothing happens, its still 3times too wide

 

[Travis Newbury]

Hello! paypal donate button is to allow visitors to make a donation
through paypal... may be my wording is wrong.

back to the image: there is no width and height attribute set, and
when i try to set them somehow the width doesnt work only the height
changes :S here is the code of the image:

<input type="image" src="https://www.paypal.com/en_US/i/btn/
btn_donate_LG.gif" border="1" name="submit" alt="PayPal - The safer,
easier way to pay online!">

i tried to put it like this : <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" width="92" height="26"
border="1" name="submit" alt="PayPal - The safer, easier way to pay
online!">

The height got perfect but somehow whatever value i put in width,
nothing happens, its still 3times too wide

You need to provide the URL of the webpage that is broken. Chances
are the solutions is simple. But until we see the actual page that is
broken we can only guess at what you did wrong.

 

[Bergamot]

i tried to put it like this : <input type="image" src="https://
www.paypal.com/en_US/i/btn/btn_donate_LG.gif" width="92" height="26"

The height got perfect but somehow whatever value i put in width,
nothing happens, its still 3times too wide

If you validated your code, you'd see that neither width nor height (nor
border) is a valid attribute for the input element, even a type="image".
It would be a surprise if any browsers did as you asked. You don't need
to specify dimensions for image inputs, anyway because the actual
dimensions will be used.

If you're trying to resize the image, better to use a different graphic
that already has the correct dimensions, or use a standard plain text
submit button and style it with CSS. The usual caveat about browser
support for styling form controls applies, of course.

 

[adminmax]

I think Bergamot is right about it being an input (-as opposed to image),
so it's probably expanding to the default _input_ width. Try removing the
width="92" height="26" and instead do a style like <input type="image"
style="width:92px;"... Another thing which may be advantageous is to set
the input to display:block;

here is the link :

http://tranceendnow.com/contact.html

???

Thanks

 

[dorayme]

Hello!

Im just getting started with websites and everything and this seem to
be very basic.... but for the life of me i cannot see where the
problems comes from!

When i put a paypal donate button on my page, it appears 3x bigger,
all pixelated. then if i right click on the image and "view image", it
appears just the right size...

I got the code from the paypal website so i dont think its coming from
there...

Maybe from my css image settings?

#content img, #contentwide img, #contentfull img {
padding:1px;
display:inline;
background:#cccccc;
color:#303030;
border:4px solid #f0f0f0;

But i tried to change those and nothing happened... :s

For a quick fix, remove

input {
width:200px;
}

from your stylesheet.

 

[Ari Heino]

<input src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"

name="submit" alt="PayPal - The safer, easier way to pay online!" border="1"
type="image" style="width:92px;height:26px;">

Border is not a valid attribute for input. Use CSS instead. Also note
the closing of the tag when using xhtml. Below is what you need.

<input src="contact_tiedostot/btn_donate_LG.gif" name="submit"
alt="PayPal - The safer, easier way to pay online!" type="image"
style="width: 92px; height: 26px; border: 0;" />

 

[adminmax]

Border is not a valid attribute for input. Use CSS instead. Also note
the closing of the tag when using xhtml. Below is what you need.

<input src="contact_tiedostot/btn_donate_LG.gif" name="submit"
alt="PayPal - The safer, easier way to pay online!" type="image"
style="width: 92px; height: 26px; border: 0;" />

Works!!

Thanks everybody!