Welcome to WebmasterWorld Guest from 23.22.182.29

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)

New User

5+ Year Member

joined:Apr 22, 2010
posts:4
votes: 0


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)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12704
votes: 244


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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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)

New User

5+ Year Member

joined:Apr 22, 2010
posts:4
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members