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 to the CF scene
    Join Date
    Aug 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    bothering border

    dear all. this is troubling me.

    i've applied:
    border-left: 1px solid #b5b5b5

    to some links and when hovered, i would like the border to change color.
    border-left: 1px solid #ff3300;

    however, it doesn't turn out the way i want it to be.

    see:
    http://www.myshops.com.sg/branded/1.htm

    also, when i move these two lines down to the child class:
    padding-left: 5px;
    border-left: 1px solid #b5b5b5

    the "short links" seems to be working fine but for longer links, not only the lines are broken, the indent (padding) is only applied to the first line.

    to see what i get:
    http://www.myshops.com.sg/branded/2.htm

    any idea what may be wrong?

    thanks.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shouldn't you place border-left: 1px solid #b5b5b5 under .navbar a:link, a:visited { then?

    I think you'd solve all of your problems if you actually wrote a menu the proper way, with a list...

    <ul>
    <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>
    </ul>

    Etc

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i took ur advice and replace it with a proper list.

    css now is:

    <style type=text/css>

    ul
    {
    padding: 0;
    margin: 0;
    list-style: none;
    }

    ul li {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    line-height: 16px;
    margin-top: 0px;
    }

    ul li a:link, a:visited {
    color: #666; text-decoration: none;
    padding-left: 5px;
    border-left: 1px solid #b5b5b5
    }

    ul li a:hover, a:active {
    color: #222;
    padding-left: 5px;
    border-left: 1px solid #ff3300;
    }

    </style>



    html:
    <ul>
    <li><b><a href="1.htm">Some Text 01</a></b><p></li>
    <li><b><a href="1.htm">Some Long Text 01</a></b><p></li>
    <li><b><a href="1.htm">Some Even Longer Text 010101010101</a></b><p></li>
    <li><b><a href="1.htm">This is going to be really loooooooooonnnnnnnng text</a></b></li>
    </ul>


    but the broken lines and the padding problem both remains.

    see at:
    http://www.myshops.com.sg/branded/3.htm

    thanks.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    This line is causing the line break:
    Code:
    <td width="510">&nbsp;</td>
    a very ungraceful way to sol;ve the second line being indented the same could be:
    Code:
    <ul>
    <li><b><a href="1.htm"><span>Some Text 01 Some Text 01 Some Text 01 Some Text 
    
    Some Text 01
    01</span></a></b></li>
    <li><b><a href="1.htm"><span>Some Long Text 01</span></a></b></li>
    <li><b><a href="1.htm"><span>Some Even Longer Text 010101010101</span></a></b></li>
    <li><b><a href="1.htm"><span>This is going to be really loooooooooonnnnnnnng text This is going 
    
    to be really loooooooooonnnnnnnng text</span></a></b></li>
    </ul>
    and CSS
    Code:
    ul
    	{
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	}
    
    ul li {
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 11px;
            line-height: 16px;
    	margin-top: 0px;
    }
    ul li span {
    margin-left: 5px;
    display: block;
    margin-top: -16px;
    }
    
    ul li a:link, a:visited {
    	color: #666; text-decoration: none;
    	border-left: 1px solid #b5b5b5
    }
    
    ul li a:hover, a:active {
    	color: #222;
    	border-left: 1px solid #ff3300;
    }
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a lot for the help. i found another ehh.. more graceful solution.
    just add

    display:block;

    to the css fix everything. thanks.


  •  

    Posting Permissions

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