Responsive images get unresponsive when trying to enlarge the browser window - compass-sass

Question

Somehow it seems i run into issues on that image matrix example again and again i deal with in combination with Susy. :/ In preparation of finishing the project by applying media queries to it making things responsive i initially inspected the current state and resized the browser window. There happened the following:
https://dl.dropbox.com/u/8578/Resize.mov
Both shown image matrices consist of raster images. The black image matrix resizes and enlarges without a problem. But the second matrix has issues on enlarging again. Is that a plain CSS issue or more Susy related? And is there a way to fix it? :/
The basic Susy settings are:
$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;
For images the following was applied:
img{
width:100%;
max-width: 100%;
height:auto !important;
}
The HTML part for the first matrix looks like that (i've entered only one li element - the other 27 differ only in title and linked images):
<ul class="customers sectionwrap">
<li><a><img title="Company" src="img/logo.png" alt="Logo" /></a></li>
</ul>
The Susy and layout relevant CSS parts for the first matrix (7x4) look that way:
.customers {
#include with-grid-settings($gutter: 0.1%){
li {
margin-right: -100%;
#include span-columns(2,14);
#include nth-omega(7n);
#for $g from 1 through 28
{
&:nth-child(#{$g}){#include push(0);}
}
}
}
}
The HTML part for the second matrix looks like that (i've entered only one li element - the other 8 differ only in title and linked images):
<ul class="moodlegrid sectionwrap">
<li><a class="ajax1" href="projekt1.html"><img title="Projekt1" src="img/1.jpg" alt="Projekt1" /><img title="Projekt1" src="img/2.jpg" alt="Projekt1" /><span class="spiceup">Zum Projekt</span></a></li>
</ul>
The Susy and layout relevant CSS parts for the second matrix (3x3) look that way - they are split because they are located in different partials:
.moodlegrid{
#include with-grid-settings($gutter: 0.8%){
li{
margin-right: -100%;
#include trailer(1 / 2);
#include span-columns(6,18);
#include nth-omega(3n);
#for $i from 1 through 9
{
&:nth-child(#{$i}) {#include push(0);}
}
}
}
}
.moodlegrid{
li{
a{
position: relative;
float:left;
display:block;
img:nth-child(1){
float:left;
display:block;
}
img:nth-child(2){
display: none;
}
span{
display:none;
}
}
a:hover{
img:nth-child(2){
display: block;
position: absolute;
z-index: 100;
top:0;
left:0;
}
span{
display: block;
position: absolute;
text-align:center;
top: 42%;
left: 34%;
z-index:101;
padding: 0.24em;
#include border-radius(5px, 5px);
#include box-shadow(black 2px 2px 10px);
}
}
}
}

Answer 1

I'd bet that your problem comes from floating the a tags that wrap the images. When you float something it creates a new layout context. If you don't set a width, the float collapses to the smallest possible size. Your img setting width: 100%; is figured as 100% of the collapsing a rather than 100% of the li. You can either remove the float or set width: 100%; on the a as well.