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?
A:
I'm able to fix it by removing the rule:
* { padding: 0 }
From your CSS. I'm not sure what that's breaking, but that is the cause.
Eric Wendelin
2010-09-25 23:15:19
I can confirm that this works, but I also have no idea why. Using Chrome's built-in DOM viewer, you can see that the entire <body> tag seems to be shifted down, not just the header. Very strange.
mlms13
2010-09-25 23:23:13
So what I'd recommend here is just using Eric Meyer's CSS Reset: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ instead of "* {margin:0; padding:0}". HTH
Eric Wendelin
2010-09-26 03:25:40
thx eric - i noticed that too, but couldn't get to fixing it via css -- but andrew found the offending line and now i'm good -- thx for the comment
mptorr
2010-09-26 03:32:56
+1
A:
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.
Andrew Vit
2010-09-26 00:01:24
HOORAY -- andrew you nailed it! took off that goddam margin from .mini-search and repositioned it via padding now i'm good to go. thanks a lot!!!
mptorr
2010-09-26 03:32:20
A:
i trust you have done:
body {padding :0; margin:0}
by default the body tag has padding.
WalterJ89
2010-09-26 00:10:31
adding this line to my css made no difference - thx for the comment walter
mptorr
2010-09-26 03:24:57
A:
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*/
}
Horacio Nuñez
2010-09-26 00:20:34
A:
Always include the YUI reset css file.
and:
body, html {padding: 0; margin:0} that's it!
Omar Dolaimy
2010-09-26 00:48:58
omar, this one also did not work -- added the line you recommend but no change - thx though
mptorr
2010-09-26 03:26:29
A:
I see a bit of extra padding not on the top but on the sides, in both Chrome and Safari, although it's a bit more pronounced in Chrome.
Richard Careaga
2010-09-26 02:30:12