Jump to content

using a reset stylesheet


skaterdav85
 Share

Recommended Posts

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?4602148907_f1a6b5d87d_o.jpg

Edited by big dave
Link to comment
Share on other sites

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

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.

Edited by big dave
Link to comment
Share on other sites

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

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

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

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

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... :)

Edited by thescientist
Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...