Results 1 to 6 of 6

Thread: Does text-align work on links?

  1. #1
    Join Date
    Mar 2007
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Does text-align work on links?

    I thought it did... but I can't seem to make my links align to the right on hover. Am I possibly doing it wrong or does text-align not affect links?

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    text-align can't be applied to elements with display: inline. Apply it to the block element containing your links, or make your links display: block.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Mar 2007
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    What exactly is the difference between display:inline and display:block?

  4. #4
    Join Date
    May 2007
    Location
    Viet Nam
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    you should align the link to right and then format the link:hover, i think it works fine.

  5. #5
    Join Date
    Mar 2007
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well, I followed Twey's advice and it works but for some reason in a certain div I have the links done differently yet it reads the formatting for the other links. Basically the only difference is that I don't want these links to align while the rest do.

    For the main links that are supposed to align right I have:

    Code:
    a:link, a:visited{
    text-decoration: none;
    color: gray;
    background-color: transparent;
    text-indent: .5cm;
    text-align: left;
    display: block;
    }
    a:hover{
    text-decoration: none;
    color: gray;
    background-color: #404040;
    text-align: right;
    font-weight: bold;
    display: block;
    }
    a:active{
    text-decoration: none;
    color: #000;
    background-color: transparent;
    display: block;
    }
    And then for these particular set of links that do not I have:

    Code:
    .holder a:link, .holder a:visited{
    text-decoration: none;
    color: gray;
    background-color: transparent;
    }
    .holder a:hover{
    text-decoration: none;
    color: gray;
    background-color: #404040;
    }
    .holder a:active{
    text-decoration: none;
    color: #000;
    background-color: transparent;
    }
    And it still aligns right on that one page.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Css styles are cascading, that basically means that they are inherited down the chain of selected elements unless specifically contradicted. In IE however, they often would be more appropriately termed contagious. In most browsers, probably all but IE, if you define a style for a class of link, it overrides all other link selected styles and link selected pseudo styles for that class of links. In IE all of the selected pseudo styles must be defined for the new class to avoid bleed through of other selected pseudo styles. In most other browsers, if a new class is created, it may not inherit properties from the general selector for that element. So, it is best to define everything explicitly for all selectors, pseudo and otherwise, that could possibly be different via either omission or contradiction in other selectors.

    Sound complicated? It is. Although it is possible (in theory) to correct your styles so that they would work as expected in IE and other browsers, it is far easier to do so if we have a link to the problem page:

    Please post a link to the page on your site that contains the problematic style so we can check it out.


    Style doesn't occur in a vacuum, it is made much more meaningful by the markup it is used with, and is much easier to troubleshoot at times by looking at the page and its code visually.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •