CSS Problemo's

Hi Folks
I got my HTML to validate, now I just need to get my CSS to validate… whats the deal??

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fbigbrotherlink.com%2F2.0%2F&warning=2&profile=css2&usermedium=all

Well… for the errors, it’s padding-top and padding-bottom. :slight_smile:

As for the other things… just read the errors. They say what’s wrong…

i read them, i fix them, but it never works.

like that padding-top, patting-bottom… i fix, and no go.

http://bigbrotherlink.com/2.0/css/master.css

Err… it still says bottom-padding:

hr {
	border:0;
	top-padding: 2px;
	bottom-padding: 2px;
	color: #FF7C00;
	background-color: #FFFFFF;
	height: 1px;
}

OOOOH
Im not allowed to use that code… lol. Ok I understand :slight_smile:

Now what about them warnings?

Nokrev is saying it should be:


hr {
	border: none; /* this should be set to none I believe */
	padding-top: 2px;
	padding-bottom: 2px;
	color: #FF7C00;
	background-color: #FFFFFF;
	height: 1px;
}

Instead of :


hr {
	border:0;
	top-padding: 2px;
	bottom-padding: 2px;
	color: #FF7C00;
	background-color: #FFFFFF;
	height: 1px;
}

-bigmtnskier :slight_smile:

bigmtnskier… I actually prefer to use [font=monospace]border: 0 none;[/font] :wink:

Just look at the warnings. They say what the problem is.

i googled some of the warnings and it says that they are bugs in i.e. - so i dont need to worry?

Err… no. Which one?

Line : 21 (Level : 2) Redefinition of margin-top : h1

what does that even mean?

and when it says you have no background, i do! i dont know why its giving me warning

sorry guys, this is my first attempt at css lol…

That warning means you assigned margin-top already in your code.

Rather than using:

h1 {
	margin: 0;
	padding: 0;
	width: 400px;
	float: left;
	margin-top: 55px;
	padding-left: 31px;
}

You should set the margin-top the first time…

h1 {
	margin: 55px 0 0 0;
	padding: 0;
	width: 400px;
	float: left;
	padding-left: 31px;
}

[whisper]Or do the same thing without the short-hand…[/whisper]

The background warnings are really not that important, and I ignore them. They are there to prevent you from having black text on a black background and not realizing it, and similar things, I think. You have to assign the background again on every element where you define the text color. You may just use the value “transparent”… :wink:

ok awesome! thanks!

I have one question about that margin thing though, what are each sections of the 55px,0,0,0??

like the first is top margin - then bottom? then right? then left?

you guys are big help :slight_smile:
im trying so hard to learn this stuff on my own without having to do it in school.

one more question
go to www.bigbrotherlink.com/soon

notice how some of the titles drop down to another line? how do i stop that?

If four are defined: Top, right, bottom, left.
If three are defined: Top, left & right, bottom.
If two are defined: Top & bottom, left & right.
If one is defined: applies to all.

You can remember this, because if you forget it, you’ll be in ***TR***ou***BL***e. :smiley:

[whisper]Learned from Eric Meyer’s first book…[/whisper]

i dont get it.? (the trouble part? lol)

what about my other question?

Top, Right, Bottom, Left.

T… R. o, u, B… L… e.

Top, Right, Bottom, Left.

You see…?

ahh i uunderstand. :slight_smile: clever!

now what about my other question

Making your font size smaller. :wink:

There’s a word-wrap function, but that doesn’t have wide support. What do you want to happen if they’re too wide?

but they shouldn’t be too wide - theres lots of space for it…

http://www.bigbrotherlink.com/soon/index.php?subaction=showcomments&id=1145405280&archive=&start_from=&ucat=3&
look at the comment section

the smilie faces - the happy one is on one line, and the rest are on another. Never had this problem with tables… lol

Try styling them with display: inline;