Image display problems

[Webskater]

Possibly off topic but, given the problem, possibly not.

At home I develop on a laptop with VS2005 and use IE 8

At work I develop on a Windows 7 box running VS2010 and use IE 8

On web sites I develop at home I have a library of jpgs one pixel wide and between 200 and 500 pixels high that I use as backgrounds for divs etc. They get displayed using css like ...

background: #ffffff url(images/E9E9E9White200.jpg) 0 0 repeat-x;

On the laptop at home (and websites I publish from there) the images always look fine (use them all over the place with different shades/colours/graduations etc.).

I thought I'd make one of the pages on a site at work look a bit better and used one of my graphics there. When I view the page with the jpg set as a background the jpg has broken up and is displayed in blocks - like you would expect a gif to.

So, by way of an experiment I stuck this on a page:

    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    <td><img src="images/E9E9E9White200.jpg" alt="" /></td>
    </tr>
    </table>

just to see how the graphic displayed (bearing in mind it is only 1px wide).

Stick that code on a page at home and the image displays fine - as a subtle fade from a light grey to white.

Stick that code on a page at work and the image displays as 6 blocks of grey getting progressively lighter.

Is there some setting in VS2010 that isn't in VS2005 that could cause this to happen. I guess it can't be the browser - both are IE 8 and I haven't done anything weird to the settings.

If I view the image direct in the browser at work (although only 1px wide) - it does look as though it is graduating properly. Don't mind admitting I'm a bit baffled.