...

View Full Version : bothering border



purplefish
08-10-2005, 09:03 PM
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.

mark87
08-10-2005, 09:14 PM
Shouldn't you place border-left: 1px solid #b5b5b5 under .navbar a:link, a:visited { then? :confused:

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

purplefish
08-10-2005, 09:33 PM
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.

harbingerOTV
08-11-2005, 12:55 AM
This line is causing the line break:


<td width="510">&nbsp;</td>


a very ungraceful way to sol;ve the second line being indented the same could be:


<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


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;
}

purplefish
08-12-2005, 03:11 AM
thanks a lot for the help. i found another ehh.. more graceful solution.
just add

display:block;

to the css fix everything. thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum