weird SASS problrm in production

I have noticed a weird problem with SASS on production server.

in my application css I have:

pre {
background-color: #eee;
padding: 10px;
font-size: 11px; }

div {
&.field, &.actions {
margin-bottom: 10px; } }

however firefox browser gets following CSS:

notice inserted a:hover that messes up my styling

pre {
background-color: #EEEEEE;
font-size: 11px;
padding: 10px;
}
a {
color: #000000;
}
color: #666666;
}
border-bottom: 1px solid #777777;
}
div.field, div.actions {
margin-bottom: 10px;
}

when I try to override a:hover with my CSS it works fine on development machine but doesn’t work on the production server.

How am I supposed to fix it?

got the answer on stack overflow: http://stackoverflow.com/questions/15976304/weird-css-mangling-unexpected-border-bottom-value-in-ahover