cofused about ID's

my H1 won't listen...

[Craig_F]

anyone know why this doesn't work? I'm trying to wrap my H1 in <div id="lc"> and have the colors change. the background does, but the border-bottom won't no matter what I try.

H1 {
height:20px;
padding:3 10 0 10;
border-bottom: solid 1px;
font: bold 11px Tahoma, Verdana, Arial, sans-serif;
color: #FFFFFF;
}

DIV#lc h1
{
border-bottom:#000000;
background-color:#eeeeee;
}

any ideas?

[MWpro]

Borders should always be written as the "width style color"
example: border-bottom: 1px solid #000; With one of these missing, or if they are in the wrong order, no border will show at all.

Both of your border statements are wrong in this case. If you are trying to override the h1 properties with the h1 that is wrapped in the div, you need to give both proper statements.

So in the h1
border-bottom: 1px solid #somecolor;

and in the next h1
border-bottom: 1px solid #000;

[Craig_F]

ok, that does work, but I thought you wouldn't need to repeat the "1px solid" in the second H1. that seems redundant when I'm only switching the colors.

[broniusm]

related-- Always follow values with units:

I had some fun one time with a dynamic menu in IE6: I was playing with borders via css, and at one point to change the border color, I did something along the lines of "border:808080" rather than "#808080" or something similar.... the page took a long time to render, and when it finally showed, ba-BOOOOOOoommm! this Huge, thick, black [border] consumed the screen and beyond for several menu specifications.
It actually took me a while to figure out what I did wrong. The other members of development weren't as amused as I.

-bronius

[BlobFisk]

border-bottom should be in the following format:

border-bottom: 1px solid #000;

HTH

[drbrain]

You don't need to re-specify when using the shorthand, you just need to make sure you're using the correct order (which is width, style, color).

border: thick solid; is valid
border: solid red; is valid

border: thick red; is not valid

Instead use:
border-width: thick;
border-color: red;

[MWpro]

ok, that does work, but I thought you wouldn't need to repeat the "1px solid" in the second H1. that seems redundant when I'm only switching the colors.

I believe you can do border-bottom-color: #colorname;
for that then.

I prefer to just to do the shorthand way though.

And as bron said make sure you use a unit with the padding.