Quick Css Question

[savage3e]

All-

 

Just goofing off and trying something new. I've got a basic site with a set of Navigation links off on the left, governed by the following bit of CSS:

 

>.nav a {
display: block;
margin: 0;
padding: 3px;
color: #000000; 
text-decoration: underline;
background-color: transparent;
}

 

Now, when the link has been selected and the new page loaded (with the content in a central cell), the link is displayed as static text governed by the following bit of CSS:

 

>.current {
display: block;
margin: 0;
padding: 3px;
color: #000000; 
text-decoration: none; 
background-color: #DBC8B0;  /* The color of the content cell */
}

 

This works great, except when applied to the first Navigation Link / Content Tag. When its a link, the Display property (Block) works as expected, giving me a line break before and after. However, when the first entry is static text, the Display property (Block) does not give me the opening line break, causing the entire list of links to jump upward one line. Now I can fix this by prefacing the "First Entry as Static Text" with an empty paragraph tag (<p></p>), but there's got to be a cleaner way, wouldn't you think?

 

So my question is this: What am I doing wrong and/or overlooking?

 

You can view the page in action at http://www.brad-and-jen.com/test/ and see what I'm talking about for yourselves.

 

Thanks in advance.

 

-Brad

[btrfld]

I'm going to guess that it has to do with these 2 rules:

p {

margin: 8px 0;

background-color: transparent;

}

 

.current {

display: block;

margin: 0;

padding: 3px;

color: #000000;

text-decoration: none;

background-color: #DBC8B0;

}

 

It looks as if when the top paragraph is 'current', the standard 8px margin becomes a 0px margin, so everything jumps up. Why doesn't it happen with the lower paragraphs? Probably has something to do with the fact that margins of vertically aligned blocks are (what's the word?) merged. So what's really happening is not that the first paragraph is jumping up, but that the succeeding paragraphs are not jumping down.

 

I'd try playing with the margin values and see what happens.

 

Hope this helps. Or at least doesn't hurt.

Jim

[savage3e]

It looks as if when the top paragraph is 'current', the standard 8px margin becomes a 0px margin, so everything jumps up. Why doesn't it happen with the lower paragraphs? Probably has something to do with the fact that margins of vertically aligned blocks are (what's the word?) merged.  So what's really happening is not that the first paragraph is jumping up, but that the succeeding paragraphs are not jumping down.

 

I'd try playing with the margin values and see what happens.

 

Heh. Thanks Jim. Guess it helps to uncross your eyes and get a fresh perspective. Changing the ".current" margin to mirror the "p" margins cleared this right up. Just goes to show the code's always right, eh?

 

Thanks again.