[css] Design breaking when zooming in & out

Hi,

I’m making a custom wordpress template. It’s the second I’m doing but this time I have some big problems when I zoom (“ctrl/cmd +” or “ctr/cmd -”) and when I change the size of the window of my browser.

First my background that are horizontal stripes that change from place with the category. I’ve put them as background of the body >

body.cat1 {background: url(img/bg/body-1.gif) center top repeat-y;}

Here when the window is smaller than the min-width than the stripes aren’t on their place anymore (this without zooming).

Then I have my footer and a search field on the top of it that are exploding when I zoom in and when I zoom out one of the columns of the footer do not fit anymore and goes under the rest of the elements.
My footer is a sitemap that is formed by 6 unsorted lists that I make float to the left.

.sitemap ul{
width:158px;
height: 160px;
float: left;
text-align: center;
margin: 0;
padding:0 1px 10px 1px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
display: block;
overflow:hidden;
}

and the background of the search field is placed as teh bacground of the body

{background:url(img/bg/searchmedia.gif) right top no-repeat;}

You can check it all at Testdrive for Pics
Please check the Spanish part at it is this one with most of content, also you can see the biggest mess in the MEDIATECA category (the link goes there).

Actually, I’m getting a little crazy as I’m searching on the net for a little while and can’t find any clear answer.

Thanks a lot,