Forum Moderators: not2easy
New to CSS & webmasterworld. I have several hyperlinks in a row which have the border-left attribute defined in the psuedo class selector. It places a border at the beginning of the menu, but not one at the end. I'd like to remove the one at the beginning
I'm using a linked style sheet. To remove the beginning one I've used the first-child pseudo selector which doesn't seem to work. Since then I've heard that IE doesn't support it that well. I've also used a class & id selector assigned to the <a heref> tag in HTML which also doesn't work. However, using the same selector I was able to use the border-right attribute for a solid line at the end. Even this would be a desirable result if I was able to add padding to it for consistency with the other link items, but that doesn't work either.
I've removed all code from both the HTML & CSS & now have only the single remaining DIV element, which still does not remove the vertical bar. I've looked into sites such as listamatic on CSS.maxdesign, which doesn't address this specific issue. I've also another forum using keywords which I think would be relevant to this. Again, I wouldn't mind having a the vertical bar at the end if the padding could be used. Both HTML & CSS validate. I've posted the code for both below.
thanks,
Mark
HTML 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" xml:lang="en" lang="en" >
<head>
<title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="test" />
<meta name="keywords" content="test" />
<link rel="stylesheet" href="433807_test.css" type="text/css" />
</head>
<body>
<div class="footer" >
<a class="footerfirst" href="http://www.test.com">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
<a href="test.htm">info</a>
</div>
</body>
</html>
CSS Code
.footer{
position:relative;
height:80px;
color:white;
text-align:center; background-color: black;
}
.footerfirst {border-left: none;}
.footer a:link { border-left:1px solid white;}
.footer a:visited {border-left:1px solid white;}
.footer a:hover {border-left:1px solid white;}
you can replace all of this...
.footerfirst {border-left: none;}
.footer a:link { border-left:1px solid white;}
.footer a:visited {border-left:1px solid white;}
.footer a:hover {border-left:1px solid white;}
with just this...
.footer a+a {border-left:1px solid white;}
that will only apply a border to a link if it follows another link. so the first one won't get one.
.footer a+a {border-left:1px solid white;}that will only apply a border to a link if it follows another link. so the first one won't get one.
Ideally yes, but unfortunately the adjacent selector (+) is not supported by IE6. If you don't mind the rendering not being quite right in IE6 (it is afterall only a minor presentational thing) then I reckon that's the way to go - nice and tidy markup.
However, the reason why your original code doesn't work and you get the border-left on every anchor is an issue with inheritance and specificity [webmasterworld.com].
Increase the specificity of your footerfirst rule to match your other rules:
.footer a.footerfirst {border-left: none;} And move this to the end of the cascade, so that it overrides the other styles:
.footer a:link { border-left:1px solid white;}
.footer a:visited {border-left:1px solid white;}
.footer a:hover {border-left:1px solid white;}
.footer a.footerfirst {border-left: none;} And that should sort your border issue.
I used the .footer a.link.footerfirst {border-left: none;} which did remove the bar. Then I noticed when I hovered it re-appeared. So, I did this:
.footer a:link.footerfirst {border-left: none;}
.footer a:visited.footerfirst {border-left: none;}
.footer a:hover.footerfirst {border-left: none;}
& it works just fine. Thanks for the answer.
Mark
