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
    Feb 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    top and bottom padding links not working

    Anyone know why I can't get any vertical padding on my links in container_left and container_right?

    [CODE]A:link, A:visited, A:active
    {
    color: #FFFFFF;
    background: transparent;
    text-decoration: none;
    }

    A:hover
    {
    color: #B2D7CA;
    background: transparent;
    text-decoration: none;
    }

    #container_left container_right A:link A:visited, A:active
    {
    background: transparent;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    #container_left container_right A:hover
    {
    color: #B2D7CA;
    background: transparent;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    }

  • #2
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I never give inline elements a padding so I'm not sure if that's widely supported. But I do know there's something wrong with your selectors.

    This line, for example:
    #container_left container_right A:link A:visited, A:active

    reads like this:
    a visited link in a link that is in an undefined element with a name, class or id of container_right in an element with an id of container_left
    AND
    any active link

    There's really no browser that knows what to do. I think you mean something like this:
    Code:
    #container_left a:link, #container_left a:visited, #container_left a:active,  #container_right a:link, #container_right a:visited, #container_right a:active {
    background: transparent;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    
    #container_left a:hover, #container_right a:hover {
    color: #B2D7CA;
    background: transparent;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    But you can write that story a little shorter:
    Code:
    #container_left a,#container_right a {
    background:transparent;
    text-decoration:none;
    padding:10px 0;
    }
    #container_left a:hover,#container_right a:hover {
    color:#b2d7ca;
    }

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Top/bottom padding, inline elements

    Inline content and elements -like a- don't support top and bottom padding; compliant browsers should ignore this.
    You might want to try using the line-height property to increase white space above and below your links, or turn them into block-level using "display: block;".
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok thanks for clearing that up- Span. But the padding is still an issue, and I do suspect that it's the fact that the elements are inline.

    So, next question...

    How can I spread links out in my left and right menus without using line-height. becuase if I use line height, then the spacing is too great if the link text is long and gets sent to the another line.

    I want some space in between each link, not each line of text. Is there anyway around this, so that all I have to be entering in my MENU divs is
    Code:
    <ahref="link">linktext</a><br>
    and they get spread out nicely?

    Thanks again!

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Lists? Use an unordered list for your menu. You will be able to set a margin and/or padding to the lis.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Unordered list for menu</title>
    <style type="text/css">
    #menu {
    margin:0;
    padding:0;
    list-style:none;
    }
    #menu li {
    margin:20px 0; /*this sets the space in between links*/
    }
    </style>
    </head>
    
    <body>
    <ul id="menu">
    	<li><a href="#">Link 1</a></li>
    	<li><a href="#">Link 2</a></li>
    	<li><a href="#">Link 3</a></li>
    	<li><a href="#">Link 4</a></li>
    	<li><a href="#">Link 5</a></li>
    </ul>
    </body>
    </html>


  •  

    Posting Permissions

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