media queries for computer's resulotions

See more:

HTML

CSS3

Hello everyone,
I try to design my website for most of the resolutions.
Everything went good till I tried to match a new design for a 1280X800 resolution.
I have tried to make it with this code:

@media screen and (min-width:1279px)and (max-height:721px) {
#x2
{
 margin-top:-12.5%;
}
#credit
{
 margin-top:31.4%;
}
#boxes
{
 margin-top:-18%;
}
div.left1
{
 font-size:12px;
}
div.right1
{
 font-size:13px;
}
}

I don't know why but the web-design changes only due to this media:

@media screen and(max-height:721px)and (min-width:1279px)and (max-width: 1280px){
#x2
{
 margin-top:-12.5%;
}
#credit
{
 margin-top:31.4%;
}
#boxes
{
 margin-top:-18%;
}
div.left1
{
 font-size:12px;
}
div.right1
{
 font-size:13px;
}
}