Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 933
pepe Avatar asked Sep 25 '10 22:09

pepe


5 Answers

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

like image 97
Filipp Yanukovich Avatar answered Nov 10 '22 05:11

Filipp Yanukovich


Your page has an element near the top with a top-margin that extends outside your page wrapper. If you have this:

<div class="wrapper" style="margin: 0">
  <div class="section" style="margin: 40px 0"> Stuff! </div>
</div>

Then the .section element will be positioned at the top of the .wrapper and its 40px margin will extend out the top. This has to do with the way margins collapse together so that two margins between elements don't accumulate. You can prevent this by adding overflow: hidden on the wrapper.

In your markup, it's the .mini-search element that has a 40px top margin. Either remove this margin, or add overflow: hidden on the fieldset that contains it.

like image 23
Andrew Vit Avatar answered Nov 10 '22 05:11

Andrew Vit


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*/
}
like image 22
2 revs Avatar answered Nov 10 '22 06:11

2 revs


i trust you have done:

body {padding :0; margin:0}

by default the body tag has padding.

like image 3
WalterJ89 Avatar answered Nov 10 '22 05:11

WalterJ89


It is, in my opinion, caused by an EMBED element added by some plugin just after the HTML opening tag* (check "right click > inspect element" to see if it is really there). If yes, there are basically two options to follow:

  1. disable/remove the plugin which is responsible for adding the element; (preferred, as it's global)
  2. insert embed{display:none} into your style sheet.

*This was my case - the plugin called default plugin and both disabling & removing helped solve the issue.

like image 1
Kaja Avatar answered Nov 10 '22 06:11

Kaja