Blurry images in browser

Question

hi
Can anyone help me understand why images look fine in Fireworks and in Dreamweaver, but then in FF current and in Safari they look really blurry?
http://www.bluehippotravel.com/spahotels-new3.php
The left nav buttons (3 of them) which are images and the Find Hotels image in script...they are nice crisp images in fact but once they are live they look awful.
Any ideas?
Thank you so much

Answer 1

Hi Beth,
I'm clearly doing something stupidly wrong :-)  For sure this solution is the perfect solution, but my implementation is lacking. Would you be so kind as to see where I've gone wrong? The image and text show up, but no border, background color and the text style is not being applied (the brown like hotelnameinput).  I'm sure I'm missing something really obvious! Thank you so much for your help...
Here is the div tag:
<tr>
        <td  align="left" valign="middle"><div  class="choosedetails" id="choosedetails">Choose Hotel Details</div></td>
        </tr>
Here is the css on the external stylesheet:
#choosedetails, #remove, #maphotel {
                    padding-left: 20px; /*this should allow the type to clear the image */  
#choosedetails {
                     background-image: url(images/icon-greencheck.gif);
                     background-repeat: no-repeat;
#remove { background-image: url (images/icon-redx.gif);
                    background-repeat: no-repeat;
#maphotel { background-image: url images/icon-mapnew.gif);
            background-repeat: no-repeat;
#choosedetails a:link,
#remove a:link,
#maphotel a:link {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #EAF8FB;
    color:#663300;
    font-size: 12px;
    padding:3px;
    width:168px;
    border-color: #A3D8FF;
    border-width: 2px;
    border-style: solid;
    margin-bottom:5px;
#choosedetails a:visited,
#remove a:visited,
#maphotel a:visited {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #EAF8FB;
    color:#663300;
    font-size: 12px;
    padding:3px;
    width:168px;
    border-color: #A3D8FF;
    border-width: 2px;
    border-style: solid;
    margin-bottom:5px;
#choosedetails a:hover
#remove a:hover,
#maphotel a:hover {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #EAF8FB;
    color:#663300;
    font-size: 12px;
    padding:3px;
    width:168px;
    border-color: #A3D8FF;
    border-width: 2px;
    border-style: solid;
    margin-bottom:5px;
#choosedetails a:active,
#remove a:active,
#maphotel a:active {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #EAF8FB;
    color:#663300;
    font-size: 12px;
    padding:3px;
    width:168px;
    border-color: #A3D8FF;
    border-width: 2px;
    border-style: solid;
    margin-bottom:5px;