skaterdav85 Posted May 12, 2010 Share Posted May 12, 2010 I used the YUI reset stylesheet and when i apply a background color to the body, it only puts a background color around my content. Anything below my content has white space, and there is this white gap of about 10 px above my first div (the header). Anyone know what the reset sheet is doing and how to fix this? Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 The reset sheet probably isn't doing anything. If that's all the content that you have, then that's all the bigger the body is going to be. I'm pretty sure there are ways around this, but I can't think of any off the top of my head. If you still think it's the reset sheet post the code so we can look at it. Link to comment Share on other sites More sharing options...
skaterdav85 Posted May 13, 2010 Author Share Posted May 13, 2010 well I am pretty sure it is the reset sheet. The reset css code is here. In my own style block, I just set the background color to the body like this: body {background-color:#444;} I dont know why there would be white space above and below my main container div tag, which starts directly after the body tag. If i remove the reset stylesheet, the white space goes away. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 html { color:#000; background:#FFF;} That's the problem. You're styling the <html> with a white background. The body only goes as far as the content that's in it, but the html will stretch all visible area. Change the background of the html tag or better yet remove this portion from the stylesheet. Link to comment Share on other sites More sharing options...
skaterdav85 Posted May 13, 2010 Author Share Posted May 13, 2010 ohh i see. Thanks! I guess it's better practice to just apply background colors and images to the html tag versus the body tag. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 FWIW, that stylesheet isn't very good. It uses the inherit property a lot which, according to W3Schools, is not supported by IE. Link to comment Share on other sites More sharing options...
skaterdav85 Posted May 13, 2010 Author Share Posted May 13, 2010 do you mean the inherit value i see all over the place? What does that mean anyways? Yahoo says they tested this in A grade browsers which includes IE, so maybe this IE difference is being taken are of by some other code in the stylesheet? Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 do you mean the inherit value i see all over the place? What does that mean anyways? Yahoo says they tested this in A grade browsers which includes IE, so maybe this IE difference is being taken are of by some other code in the stylesheet?The inherit means that it will inherit that value from its parent. For example:.wrapper { text-align: center;}.wrapper p, .wrapper div { text-align: inherit;} All <p> and <div> within .wrapper will have text-align: center;If a value is not supported, the browser doesn't know what to do with it so it just ignores it, which is what IE does. So anything with an inherit value will get IE's default value instead. Link to comment Share on other sites More sharing options...
skaterdav85 Posted May 13, 2010 Author Share Posted May 13, 2010 ohh i see. Are there better, more popular CSS reset sheets? I figured Yahoo! would have the best since it's a big name. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 ohh i see. Are there better, more popular CSS reset sheets? I figured Yahoo! would have the best since it's a big name.Others here may have an answer to that. The only thing I ever use for a CSS reset is this:* {margin: 0px;padding: 0px;}That's it. The '*' selects all elements.This works for the majority of what I do. Margins and padding are where the biggest problems lie anyways. Link to comment Share on other sites More sharing options...
skaterdav85 Posted May 13, 2010 Author Share Posted May 13, 2010 isnt the asterisk a CSS hack that only IE 5.5 and 6 will interpret? Wouldn't it be better to explicitly write out all the elements and set their margin and padding to 0?Check out this article on the asterisk: http://reference.sitepoint.com/css/workaro...tarhtmlselector Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 Nope. It's the universal selector.http://www.w3.org/TR/CSS2/selector.html Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 it also works like this, *p{/* stuff */} which will target all <p>'s. regardless, certainly not a hack. Link to comment Share on other sites More sharing options...
skaterdav85 Posted May 13, 2010 Author Share Posted May 13, 2010 why would you do *p versus just p alone? is p just shorthand for *p? Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 maybe my example was kind of off, but here's a better explanation by someone who probably knows what they're talking about.http://meyerweb.com/eric/articles/webrev/200006a.htmlI have the creeping feeling like I just pulled a chibineku... Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 I have the creeping feeling like I just pulled a chibineku... No, actually I think chibineku pulled a scientist. I've caught you several times, so don't you try passing the buck. Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 I think I need to disable fast reply for myself, and maybe impose my own version of flood control...post control perhaps? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.