homepage Welcome to WebmasterWorld Guest from 54.235.16.159
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
text-align:right used in a class doesn't work
Works elsewhere in the document, however
Entity




msg:4312821
 11:08 pm on May 15, 2011 (gmt 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.

 

lucy24




msg:4312826
 11:33 pm on May 15, 2011 (gmt 0)

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




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

Entity




msg:4313267
 7:50 pm on May 16, 2011 (gmt 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!

alt131




msg:4313291
 8:51 pm on May 16, 2011 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved