Jagged images in IE7 - html

Question

I'm fighting with IE7, trying to "make this happen". The thing is that I dont want to use JavaScript. I want to find a solution in case JavaScript is not on. As you can see the image is jagged, pixelated. But if I change the image format, to JPG for instance, it looks much better. I need to have them with transparent background. Any idea why is this happening?
.
<div id="container">
<!-- <div id="main" role="main">-->
<h2>Example</h2>
<div id="group_1" class="level_1">
<img src="img/woodMain.jpg"alt="">
<ul id="ul_1" class="level_2">
<li class="level_2">
<label class="level_3"><img src="img/newLabel.png" alt=""></label>
<img src="img/book_3.png">
</li>
<li class="level_2">
<label class="level_3"><img src="img/newLabel.png" alt=""></label>
<img src="img/book_4.png">
</li>
</ul>
</div><!-- ends 1_group -->
<div id="2_group" class="ground_cero">
<img src="img/2_group.png"alt="">
<!--
<ul>
<li>
<label><img src="" alt=""></label>
</li>
-->
</div><!-- ends 2_group -->
<!-- </div> --><!-- ends main -->
</div> <!--! end of #container -->
and css:
body{ max-width: 100%; }
img{
/*max-width: 100%;*/
max-width: 100%;
height: auto;
}
label{
max-width: 30%;
height: auto;
position: absolute;
}
label img{
}
div#container{
margin: auto;
border: 2px solid red;
}
/*
div#container div#main{
*/
/*border: 1px solid black;*/
/*max-width: 70%;
/*z-index: 1;
}*/
div#container div{
margin: auto;
max-width: 82%;
position: relative;
/*border: 1px solid red;*/
}
div#container div img{
width: 100%;
height: auto;
}
div#container div#group_1 #ul_1{
padding: 0px;
overflow: hidden;
margin: 0px;
/*border: 1px solid green;*/
bottom: 3%;
left: 0px;
max-width: 100%;
position: absolute;
margin-left: 2%;
}
div#container div #ul_1 li {
list-style: none;
margin-left: 5%;
display: inline-block; /* others than IE 7 */
position: relative;
zoom: 1; /* calling the haslayut method inside IE7 */
*display: inline; /*targeting IE6-7 */
bottom: 0px;
width: 25%;
vertical-align: bottom;
}