text-align:right used in a class doesn't work

Works elsewhere in the document, however

[Entity]

So in a nutshell, inside the main body element is a footer section, and at the end of the footer section is a copyright line, where I've formatted it with a class.

The HTML:

<div id="Footer"> <!-- Footer area -->
Contact information - lorem ipsum dolor sit amet?<br />
<span class="italic">Available 9AM-5PM, Mon-Fri.</span><br /><br />
Phone:[012]-345-6789 or [555]-555-5555<br />
Email:address [at] domain.com<br />
You can also use <a href="http://www.example.com">our online form</a> to send us an email.<br />
<span class="copyright">&copy; Copyright 20XX-20XX YourCompanyNameHere</span>
</div> <!-- End footer area -->

The CSS:

.copyright /* Copyright line in footer */
{
text-align:right;
}

Everything works fine except for the copyright class, however; it doesn't align to the right. Adding the class anywhere else in the HTML document doesn't work either; however, adding text-align:right to another section in the CSS file works (e.g. adding it to body makes the entire document align to the right, adding it to #Footer makes the entire footer align to the right, etc).

I've tried aligning other parts of the document to the right, and it always works, except for that section. I've tried removing the copyright symbol, clearing everything but the copyright line out of the footer section, clearing the CSS file of everything but the copyright class... argh, I know it's a dumb mistake I've made somewhere. Any pointers?

The doctype is XHTML 1.0 transitional.

[lucy24]

You're setting a block-level property (text-align) on an inline element (a span). Depending on browser it may or may not work. In the worst case-- I've seen this-- the property you set for the span will bleed back to its containing block, making everything right-aligned.

Instead of <br /> followed by a span, why don't you simply make a new paragraph? Seems by far the easiest approach. If you don't want the extra vertical space, say

.footer p {margin-top: 0;}

or, for that matter,

.footer p {text-align: right; margin-top: 0;}

since there's only the one.

[rocknbil]

To fortify that - <br> (or <br/> ) is only a visual "effect," by using semantic elements you give your content meaning to devices reading them - like search engines. Empty elements like <div>, <br> <span> have no semantic meaning. Each of those lines can be paragraphs.

[Entity]

Thank you very much lucy24, that has set me on the right path!

For those curious, here's the final CSS:

#Footer p /* Copyright line in footer */
{
float:right;
font-size:14px;
margin-top:0;
}

Cheers!

[alt131]

Hi Entity :),

Good to see you finally stopped "lurking" - and welcome to css. Thanks for posting back the solution you created!

As you've just begun exploring html/css, you might want to look at the address [w3.org] element as part of rocknbil's suggestion to use elements with semantic meaning. An understanding of display [w3.org] is always helpful too.