CODEWITHSUNDEEP
htmlcssimagestretch
user2058050
user2058050

Reputation: 63

Small icons stretching to unwanted sizes

Having an issue with a small 53x49 image icon being stretched to a giant size.

This: http://imageshack.us/photo/my-images/837/arrowsj.png/

Is supposed to be this size: http://imageshack.us/photo/my-images/32/resetw.png/

Does anyone know what would cause this to happen? Or what to look for to take out to prevent it? Or what to type in to fix it?

Have Tried: Using background image, using a div.

Thanks!

Image code:

<a href='getestimate.php'><img id='fixed' src='css/images/reset.png' alt='Reset' title='Reset'></a>

CSS CODE:

* { padding:0; margin:0; outline:0; }
body {
background:#fff;
font-family: Arial, sans-serif;
font-size:12px;
line-height:18px;
color:#6d6d6d;
}
input, textarea, select { font-family: Arial, sans-serif; font-size:12px;color:#6d6d6d;     }

a img { border:0; display: block;}

a { color:#0184c4; text-decoration: underline; cursor:pointer; }
a:hover { color:#1c6183; text-decoration: none; }
#fixed {width:53px; height:49px;}

.notext { font-size:0; line-height:0; text-indent: -4000px; display:block; }

.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }

.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }

.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }

h2 { font-size:23px; line-height:26px; color:#0188c9; }
h3 { font-size:16px; line-height:20px; color:#000; }

h2, h3 { font-family: "Trebuchet MS", Arial, sans-serif;}

h1#logo { font-size:0; line-height:0; width:245px; height:74px; float:left; }
h1#logo a{ display:block; height:74px; text-indent: -4000px;     background:url(images/logo.gif); }

.shell { width:980px; margin:0 auto; }

#header { height:74px; background:url(images/header.gif);}

#navigation { float:right; height:30px;}
#navigation ul{ float:left; height:30px; list-style-type:none; padding-top:27px;}
#navigation ul li{ float:left; display:inline; margin-left:10px;}
#navigation ul li a{ float:left; width:110px; height:30px; text-align: center; background:url(images/nav.gif) no-repeat 0 0; line-height:30px; text-decoration: none; color:#7b7b7b; }

#navigation ul li a:hover,
#navigation ul li a.active { background-position:right 0; color:#fff;}

#slider { height:390px; background:url(images/slider.gif);}


.slider-holder { height:390px; position:relative; overflow:hidden; z-index:100}
.slides { width:894px; height:315px; position:relative; overflow:hidden; top:59px; left:43px;}
.slides .jcarousel-clip{ width:894px; height:315px; position:relative; overflow:hidden; }
.slides ul{ width:758px; height:315px; position:relative; overflow:hidden; list-style-type: none;}
.slides ul li{ float:left; display:inline; width:758px; height:315px; position:relative; overflow:hidden; margin:0 0 0 136px; left:-68px;}


.slide-shadow { position:absolute; bottom:0; height:26px; width:771px; background:url(images/slide-shadow.png); left:-6px;}
.slide-bg { width:758px; height:267px; position:relative; overflow:hidden; background:url(images/slide-bg.gif); padding:5px; }
.slide-image{ float:left; width:271px; }
.slide-info{ float:left; width:440px; padding:30px 0 0 15px; }
.slide-info p{ padding:13px 0 20px;}

.slider-nav { font-size:0; line-height:0; }
.slider-nav a{ width:43px; height:46px; text-indent: -4000px; position:absolute; top:165px; }
.slider-nav a.prev{ left:0; background:url(images/prev.gif); }
.slider-nav a.next{ left:937px; background:url(images/next.gif); }

.learn-button { width:165px; height:37px; background:url(images/learn-button.gif); }

#main { width:100%; background:url(images/main.gif) repeat-x 0 0; padding:45px 0 40px 0;}

.col { float:left; display:inline; width:280px; margin-right:70px; padding:10px 0;}
.col-last { margin-right:0;}

.col h3 { padding-bottom:12px; }
.col p { padding-bottom:12px; }

.three-cols { background:url(images/three-cols.gif) repeat-y center 0; width:100%;}

.ico { background-repeat:no-repeat; background-position:0 1px; padding-left:26px; }
.ico1 { background-image:url(images/ico1.gif)}
.ico2 { background-image:url(images/ico2.gif)}
.ico3 { background-image:url(images/ico3.gif)}

p.more { font-size:11px; }
p.more a{ background:url(images/more.gif) no-repeat 0 center; padding-left:11px;}

#footer { height:57px; background:url(images/footer.gif); line-height:56px; white-space:nowrap; color:#5c5c5c;}
#footer span{ color:#cfcfcf; padding:0 5px;}
#footer a{ color:#5c5c5c; text-decoration: none;}
#footer a:hover{ color:#0184c4;}

Upvotes: 2

Views: 2092

Answers (3)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

http://jsfiddle.net/persianturtle/JhNmp/ - Fixed

Use this CSS ID

#fixed {
    width:53px; 
    height:49px;
}

And include the ID in the html like this: 

<img id="fixed"  etc etc etc>

Try this to add specificity:

 <div id="derp">
     <img id="fixed"  etc etc etc>
 </div>

and the CSS:

#derp #fixed {
    width:53px; 
    height:49px;
}

Upvotes: 0

icemojo
icemojo

Reputation: 150

Rather than formatting with CSS, try setting the width and height values of the images. Remove the CSS class before that.
Like this...

<img src='css/images/reset.png' alt='Reset' title='Reset' width='53' height='49'></a>

Upvotes: 1

cmd
cmd

Reputation: 583

change notext { font-size:0; line-height:0; text-indent: -4000px; display:block; to { font-size:0; line-height:0; text-indent: -400px; display:block;

ge{ display: block; line-height: 0; width: 245px; height: 100px; float: left to ge{ display: block; line-height: 0; width: 150px; height: 75px; float: left

thats really the only tweaking that you can do to change the sizes down.

sorry if im not much help to you.

Upvotes: 1

Related Questions