SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Distorted Image in a Button

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

    HTML Code:
        <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
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I can't really tell from the screenshot what "distorted" means. Do you mean grainy?

    Quote Originally Posted by jbrasher View Post
    I've tested in ... IE8 and they all display the images distorted... When I view them with Explorer they look just fine.
    That's a bit contradictory.

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

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 for="r1"> etc.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-)

    Thank you both for taking the time to help me.
    Attached Images Attached Images

  5. #5
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  6. #6
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    C. Ankerstjerne:

    Thanks, that got it

    John


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •