Welcome to WebmasterWorld Guest from 54.205.251.179

Forum Moderators: not2easy

Message Too Old, No Replies

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

Works elsewhere in the document, however

   
11:08 pm on May 15, 2011 (gmt 0)

5+ Year Member



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.
11:33 pm on May 15, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
4:20 pm on May 16, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
7:50 pm on May 16, 2011 (gmt 0)

5+ Year Member



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!
8:51 pm on May 16, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.