I made a ul for my vertical links and when I click on them a outline of the box appears around them. I can not get rid of it. This is my first try at vertical links using this method. Here is my code.
/*colors used
background #fff-white
banner #0033ff-blue
content #E9E9E9-light gray
h1,h2 #03F- light blue
*/
body {
background-color:#FFF;
background-image: url(../img/webDesignBackground.png);
margin: 0px;
padding: 0px;
background-attachment: fixed;
}
#banner {
margin: 0px;
padding: 0px;
height: 120px;
background-repeat: no-repeat;
background-image: url(../img/header_robert.png);
background-color: #0033FF;
background-position: center center;
}
#wrapper {
width: 960px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}
#content {
background-color: #E9E9E9;
text-align: left;
width: 550px;
margin-left: 215px;
border: thick double #666;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 15px;
}
#leftSidebsr {
float: left;
width: 160px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
}
#rightSidebar {
width: 127px;
float: right;
}
.h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 1.3em;
color: #03F;
text-align: center;
text-transform: capitalize;
}
.h2 {
font-family: Verdana, Geneva, sans-serif;
text-align: center;
color: #03F;
font-size: 1em;
text-transform: capitalize;
}
ul {
list-style-type: none;
padding: 0px;
float: left;
margin: 0px;
}
li {
list-style-type: none;
background-position: left top;
margin: 0px;
padding: 0px;
}
ul li a {
color: #FFF;
background-image: url(../img/pixiRollOver.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 25px;
display: block;
width: 145px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-transform: capitalize;
font-size: 1.3em;
text-decoration: none;
padding: 0px;
margin-bottom: .10em;
}
ul li a:hover {
background-image: url(../img/pixiRollOver.png);
background-repeat: no-repeat;
background-position: right bottom;
}
/*ul li a:active {
color: #000;
}*/
I commented out the ul li a:active because the black shows up. With white it is not as noticeable but you can still see it. I made my links rounded this also helps it disappear. What you see when you click on the link is a dished box. Do not know if this will help but this is the rest of the code from a page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HOME</title>
<link href=",css/mainCss.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="banner"></div>
<div id="wrapper">
<div id="rightSidebar"><a href=
"http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=grabenair-">
<img src=
"http://tracking.hostgator.com/img/WordPress_Hosting/125x125-animated.gif"
border="0" ></a></div>
<div id="leftSidebsr"><!-- #BeginLibraryItem "/Library/left_sidebar_links.lbi" -->
<ul>
<li><a href="index.htm"class="rounded">home</a></li>
<li><a href="contact_me.htm"class="rounded">contact me</a></li>
<li><a href="roll_overs.htm"class="rounded">roll overs</a></li>
<li><a href="css_styles.htm"class="rounded">css styles</a></li>
<li><a href="links.htm"class="rounded">links</a></li>
</ul>
<!-- #EndLibraryItem --></div>
<div class="rounded" id="content"><!-- #BeginLibraryItem "/Library/up dated date.lbi" --><p>Last updated: march 8th, 20011</p><!-- #EndLibraryItem --><p> </p>
<h1 class="h1">Introduction</h1>
<p>Hello, my name is Robert Bonner, I am a web designer. I am now
studying to become a developer. I will be honest and tell you that
I have been web designing only about 18 months . I went to college
to get my degree in networking, I took a class in web designing for
a filler class, I found that I liked it better. When I was supposed
to be studying for my networking classes I would be writing code
for a fictious web site trying to make it work. I finely decided to
quit networking and spend my time on web designing.</p>
<p>On a friends advice I started this reference site as a please to
put code blocks and how to stuff, for a personal reference. That
way as I learned more and more I would find it useful, as I would
find that I will be using code over.</p>
<h1 class="h1">Why I built this site</h1>
<p>This web site is not meant to be a tutorial, it is a place for
me to have files that I have done web designing, basically an on
line file cabinet. It is solely a place for me to look up code
blocks and any other information that I might use in my web site
building. I built this site organized in a manner that I can
remember where I put it.This way I can do less research and more
web site building. With this in my work flow my site building has
speeded up considerably. When I started I could have used a site
like this. I would also suggest that you build yourself a site for
your stuff, you will find it handy.</p>
<p>As this is not a tutorial per say, I do not include basic things
like how to copy and past or how to set up your ftp. I just have
simple instructions on how to. If you are a beginner you might get
lost in some of the things that I put in this site, simply because
I might leave a step or two out. But not to worry I will be glad to
help you out if I can. Feel free to contact me, I check my email
very often, I will get back to you on the same day that you email
me.</p>
<p>I use DreamWeaver CS4 as a text editor, but there are plenty of
free ones out there, I am going to suggest Komodo Edit. A lot if
not most of the things I put in here is working with the Dream
Weaver interface, although I will always put the code along with
the how to.</p>
<p>Well as you can tell I am not a writer so I am going to stop
now.</p>
</div>
</div>
</body>
</html>
