ipad css / viewport

Question

I have two issues (iPhone\iPad only) I haven't been able to resolve on my website

1. I have weird margin beneath the header container (2px), this can be resolved by adding overflow:hidden, however that means my dropdowns won't work which is rather inconvenient.

2. There seems to be a problem with the viewport (both portrait and landscape).. I am using the 978pixel grid.. shouldn't it just shrink to fit?

these are my extra css rules (I have UA detection and specific css)

html * {
    max-width: 980px;
}

.container {
    padding: 0;
}

header {
    position: relative;
}

div#content {
    margin-top: 0px;
}

Answer 1

Removing the bottom padding from your logo fixes the problem for me, i.e.

header img.logo {
    padding: 9px 5px 0 0;
}