Extra padding on Chrome/Safari/Webkit — any ideas?

Question

My page has this extra padding on the top of page that I\'m unable to remove. Tried everything under the sun and hope someone can show me the way.

Any ideas?

Answer 1

The WebKit styles sheet contains the following: 'margin' and 'padding' properties:

-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:

-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:

Enjoy

Answer 2

Use this css code:

/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}

The issue you comment is because the user agent style, I learn about it inspecting the body tag with the browser tool. You should track down the element styles on a navigator using the tools it provides (now all the importants include a DOM inspector) so you can demystify the non-standard behavior.

I know you dont ask for it but talking about WebKit stuffs, i paste a code for getting rounded borders on every browser but IE.

.rounded
{
-moz-border-radius:5px; /*works on Firefox */
-webkit-border-radius:5px; /*works on Safari and Google Chrome*/
border-bottom-radius: 5px; /*works on Opera*/
}

Answer 3

I had the same problem with my nav that has a padding and contains buttons. Overflow:hidden did work, but it also cut the buttons off, because they had a padding that crossed the border of the navs height. So I tried overflow:visible and that worked just fine for me.