Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to align links so that it looks the same in all browsers

    The problem is the links on the sidebar are centered when they should be aligned to the left. The links are aligned properly when viewed in internet explorer but in other browsers it looks centered. Can someone help me resolve this issue? How do I fix it so that it is aligned to the left in all browsers.

    oh almost forgot! how can I shorten the link parts in the stylesheet. I mean since the active, visited, hover, and link parts all have the exact same coding. Would this work?

    a.inocente:link,hover, active,visited
    {
    width: 130px;
    font-size: 12px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }




    HTML Page: http://smelllybean.webs.com/testing2.htm
    My Stylesheet:
    body
    {
    bgcolor: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-color: black;
    font-size: 12pt;
    background-image:url("http://img829.imageshack.us/img829/914/66100548.png");
    background-color:#000000;
    background-repeat:repeat-y;
    font-size: 12px;
    text-align: center;
    }

    /* Navigation Links*/
    a.inocente:link
    {
    width: 130px;
    font-size: 12px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }
    a.inocente:visited
    {
    width: 130px;
    font-size: 12px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }
    a.inocente:hover
    {
    width: 130px;
    font-size: 12px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }
    a.inocente:active
    {
    width: 130px;
    font-size: 12px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }

    ul
    {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width:108px;
    }
    li
    {
    background-image: url(http://img255.imageshack.us/img255/5...eredlink.png);
    background-repeat: no-repeat;
    background-position: 4px 5px;
    padding-left: 18px;
    }


    #banner
    {
    background-image: url(http://img440.imageshack.us/img440/7643/30277505.png);
    background-repeat: no-repeat;
    position: absolute; left: 175px;top: 0px;
    width: 644px;
    height: 150px;
    }

    html
    {
    scrollbar-face-color: #B6342E;
    scrollbar-arrow-color: #CABB86;
    scrollbar-highlight-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-3dlight-color: #D2BE82;
    scrollbar-track-color: #000000;
    }


    /* 2 divs Position Sidebar Links*/
    div.smellly
    {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 143px;
    overflow: hidden;
    }
    div.bean
    {
    position: absolute;
    left: 844px;
    top: 0px;
    width: 143px;
    overflow: hidden;
    }


    table.anseris
    {
    width: 140px;
    margin-left: 0px;
    margin-top: 0px;
    border: none;
    }

    /* Red Links on Navigation Bar*/
    a.Errai:link
    {
    width: 130px;
    font-size: 12px;
    color: #B6342E;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }
    a.Errai:visited
    {
    width: 130px;
    font-size: 12px;
    color: #B6342E;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }
    a.Errai:hover
    {
    width: 130px;
    font-size: 12px;
    color: #B6342E;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }
    a.Errai:active
    {
    width: 130px;
    font-size: 12px;
    color: #B6342E;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    }


    div.lovespoo
    {
    position: absolute;
    left: 177px;
    top: 151px;
    width:640px;
    overflow:auto;
    border-color: 00000;
    border-style: none;
    border-width: 3px;
    }


    /* Red Links that are not on the nav. bar*/
    a.Neshmet:link
    {
    font-size: 12px;
    color: #B6342E;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    a.Neshmet:visited
    {
    font-size: 12px;
    color: #B6342E;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    a.Neshmet:hover
    {
    font-size: 12px;
    color: #B6342E;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    a.Neshmet:active
    {
    font-size: 12px;
    color: #B6342E;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }

    Last edited by robenolt; 10-31-2010 at 06:33 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    You need to supply a valid markup to expect a compatible output. See the errors in your markup at http://validator.w3.org/check?verbos...2Ftesting2.htm

    To begin with, add a valid DOCTYPE at the top. I'd recommend the HTML Strict one.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    841
    Thanks
    11
    Thanked 79 Times in 77 Posts
    All CSS properties that are the same for all link states can be put under one style without having to repeat them over and over. You have the basic idea to use each link condition itemized with commas between them and one style. Might try:

    Code:
    a {
    width: 130px;
    font-size: 1em;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }

    If your links are centered, then you have styled them to be centered as the browser's default is to set left unless otherwise set to some other format. You have the body tag showing text to be centered. Might be affecting the nav. Or, the nav container CSS may have the text centered.

    You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

    * link - this is a link that has not been used, nor is a mouse pointer hovering over it
    * visited - this is a link that has been used before, but has no mouse on it
    * hover - this is a link currently has a mouse pointer hovering over it/on it
    * active - this is a link that is in the process of being clicked

    Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

    Pseudo Classes

    You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

    You can do this in the following fashion:

    Code:
    #pseudo_content a:link {color: #090;}
    #pseudo_content a:visited {color: #999;}
    #pseudo_content a:hover {color: #333;}
    #pseudo_content a:focus {color: #333;}
    #pseudo_content a:active {color: #090;}
    Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.

    Then for the links in a column you could use the following:

    Code:
    #pseudo_column a:link {color: #090;}
    #pseudo_column a:visited {color: #999;}
    #pseudo_column a:hover {color: #333;}
    #pseudo_column a:focus {color: #333;}
    #pseudo_column a:active {color: #090;}
    Once again, this assumes the name of the column division, just change the name to match yours.

    This same method can be accomplished by declaring a class instead of an id.

    Code:
    a.pseudo_column:link {color: #090;}
    a.pseudo_column:visited {color: #999;}
    a.pseudo_column:hover {color: #333;}
    a.pseudo_column:focus {color: #333;}
    a.pseudo_column:active {color: #090;}
    Though in this case you will need to add a class to each link

    Code:
    <a class="pseudo_column" href="" title="">some link text</a>
    But, there is still yet an easier way

    Code:
    .pseudo_column a:link {color: #090;}
    .pseudo_column a:visited {color: #999;}
    .pseudo_column a:hover {color: #333;}
    .pseudo_column a:focus {color: #333;}
    .pseudo_column a:active {color: #090;}
    Then in the (X)HTML file

    Code:
    <div class="pseudo_column">
    <a href="" title="Link Description">Link Text Description</a>
    </div>
    ☠ ☠RON☠ ☠

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That was exactly what I was looking for. I know its not a common to have the visited, hover, and active links the same color but I'll go crazy if they change colors ^_^

    Thanks for your help :]

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    841
    Thanks
    11
    Thanked 79 Times in 77 Posts
    You're very welcome.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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