Distorted Image in a Button

HTML & CSS
1

I have a simple FORM with 4 buttons to show a rating: 1 thru 5 stars.

    <tr> 
     <td>Rating:</td> 
     <td> 
     	<form name="ratingForm" action="#"> 
     	 <div id="buttons"> 
        <label="r1"><input type="radio" name="rating" id="r1" /><img src="images/1star.png" alt="1 star" width=20 height=20></label><label="r2"><input type="radio" name="rating" id="r2" /><img src="images/2star.png" alt="2 star" width=20 height=20></label><label="r3"><input type="radio" name="rating" id="r3" /><img src="images/3star.png" alt="3 star" width=20 height=20></label><label="r4"><input type="radio" name="rating" id="r4" /><img src="images/4star.png" alt="4 star" width=20 height=20></label><label="r5"><input type="radio" name="rating" id="r5" /><img src="images/5star.png" alt="5 star" width=20 height=20></label>                           	           
       </div> 
      </form> 
     </td> 
    </tr>

I’ve tested in Chrome, FF and IE8 and they all display the images distorted; see attached screen print file.

When I view them with Explorer they look just fine.
I’ve tried .gif and .png images but they appear the same.

What am I missing?

Thanks for your time,

John

2

C. Ankerstjerne:

Thanks, that got it :blush:

John

3

I don’t know if it has any bearing on your problem, but the HTML markup is invalid.

Instead of <label="r1"> you should have <label [b]for[/b]="r1"> etc.

4

You’ve set the width to 20 pixels, but the images are clearly wider than this. If you change the width to the image’s actual width, it will work.

5

I can’t really tell from the screenshot what “distorted” means. Do you mean grainy?

That’s a bit contradictory. :slight_smile:

We’d need to see the associated CSS to make a better judgement about what’s wrong.

6

ralph.m:

I’ve attached some screen shots showing the HTML rendering and the Windows Explorer view of the files.
As you can see the display in HTML is blurry and distorted compared to the Explorer view.

AutisticCuckoo:

Good catch, I changed my code and got the same results :slight_smile:

Thank you both for taking the time to help me.