justify problem

[disgust]

I have these definitions:

body { font-size: 10pt; font-family: Tahoma, Helvetica, sans-serif; margin: 0; color: #000000; text-align: justify; }
p, td { font-size: 10pt; font-family: Tahoma, Helvetica, sans-serif; margin: 0; color: #000000; text-align: justify; }

.nav { font-size: 8pt; font-family: Tahoma, Helvetica, sans-serif; margin: 0; color: #666666; text-align: left; }

now, when I have span class="nav", for some reason, it's still justifying the text. any idea why? and how I can get it to stop?

[BonRouge]

Two points :

1. Do this :

body, p, td { font-size: 10pt; font-family: Tahoma, Helvetica, sans-serif; margin: 0; color: #000000; text-align: justify; }

.nav { font-size: 8pt; color: #666666; text-align: left; }

2. Try <div> instead of <span>. (I'm just guessing here - I'm not sure what your problem is exactly. Is it possible to see more code? Or a link? (Actually, I don't think they allow links on this forum...Hmmm...))

[disgust]

thanks, that fixed it

any idea why div is okay but span isn't?

[BonRouge]

'Span' is an inline element while 'div' is block level.

You can't control the width of a span. So what happens is the alignment is set by the parent element just like any other text inside that parent (whatever that may be - in your case, maybe the body).

As a div is block level it takes 100% width as a default and you can align your text within that.

Make sense?

[createErrorMsg]

The text-align property applies only to block level elements, and serves to align the inline content of those block level elements within the block. Since span is inline, it cannot do anything with a text-align value.

One option is to use <div>s, which default as block level. Another is to set your spans to display:block.

While these options may seem readily interchangeable, there are circumstances that may require one over the other. Valid (x)html will not allow a block level element to be nested inside of an inline element, so <div>s cannot be nested inside of, say, an <a>nchor tag. It's not to hard to imagine a situation where you would want to nest a block element in an <a>nchor, but if you did, the validator would throw up an error. However, it WOULD let you nest a <span> in there with a style setting of display:block.

An obscure and mostly useless peice of knowledge, but worth keeping in the back of your mind in case it pops up someday.

[BonRouge]

That is actually quite useful to know. Thanks for that.