Anchor tag CSS

I have the css below for an achor tag.

I need a show the border of the box once hover how can I do that?
a.menu:link      
{
	color:#fff;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
}
a.menu:visited   
{
	color:#fff;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:hover
    {color:#fff;
    text-decoration:none;
    background-color:Transparent;
    border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:active    
	{color:#fff;
    text-decoration:none;
    background-color:transparent;
	border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}

Open in new window

LVL 8
PagodNaUtakAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Add a line-height to the CSS like below.
a.menu:link        
{  
        color:black;  
        text-decoration:none;  
	line-height: 26px;  
        border-right: solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
}

Open in new window

0
 
Gurvinder Pal SinghCommented:
<<I need a show the border of the box once hover how can I do that?>>
which box? and on hover on what?

Please elaborate
0
 
PagodNaUtakAuthor Commented:
sorry, what I mean of box is the border of the anchor tag...

What I want to do is to show the border of the anchor tag when you hover on it...

Let me know if I am still unclear. :)
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Gurvinder Pal SinghCommented:
i think i understand it now.

Just try after removing the border property from other anchor selectors other than a.menu:hover

That is, other than a.menu:hover, other anchor tag related selectors need not have the border property
0
 
Dave BaldwinFixer of ProblemsCommented:
If you have a dark background your seems to work fine.  ??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body { background-color: #000040; }
a.menu:link      
{
        color:#fff;
        text-decoration:none;
        border-right: solid 1px white;
        padding:0 0 0 5px;
        margin:0 0 0 0 5px;
}
a.menu:visited   
{
        color:#fff;
        text-decoration:none;
        border-right: solid 1px white;
        padding:0 0 0 5px;
        margin:0 0 0 0 5px;
        }
a.menu:hover
    {color:#fff;
    text-decoration:none;
    background-color:Transparent;
    border:solid 1px white;
        padding:0 0 0 5px;
        margin:0 0 0 0 5px;
        }
a.menu:active    
        {color:#fff;
    text-decoration:none;
    background-color:transparent;
        border:solid 1px white;
        padding:0 0 0 5px;
        margin:0 0 0 0 5px;
        } 
-->
</style>
</head>
<body>
<a class="menu" href="home.html">home.html</a>
</body>
</html>

Open in new window

0
 
Pratima PharandeCommented:
http://css-lessons.ucoz.com/link-css-examples-1.htm

try
a:hover
    {color:green;
   
  border: solid inset blue;
      padding:0 0 0 5px;
      margin:0 0 0 0 5px;
      }
0
 
PagodNaUtakAuthor Commented:
By default I need to have white border on the right, and once hover it will show the full border.

but it does not work. please see the image below: the mouse point is in the Home link...
titile-bar.bmp
0
 
Gurvinder Pal SinghCommented:
try something like this


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
	<style>
		a.menu:link      
{
	color:#black;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
}
a.menu:visited   
{
	color:#black;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:hover
    {color:#black;
    text-decoration:none;
    background-color:Transparent;
    border:solid 1px red;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:active    
	{color:#black;
    text-decoration:none;
    background-color:transparent;
	border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
	</style>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
	<a href="#"  class="menu">Same Page</a>
</BODY>
</HTML>

Open in new window

0
 
Gurvinder Pal SinghCommented:
this is more closer to what you have just described
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
	<style>
		a.menu:link      
{
	color:#black;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
}
a.menu:visited   
{
	color:#black;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:hover
    {color:#black;
    text-decoration:none;
    background-color:Transparent;
    border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:active    
	{color:#black;
    text-decoration:none;
    background-color:transparent;
	border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
	</style>
</HEAD>

<BODY BGCOLOR="#000">
	<a href="#"  class="menu">Same Page</a>
</BODY>
</HTML>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
It looks to me like you have the 'menu' in a <div> and you've set the height of the <div> too small so it clips the top and bottom borders.  Try increasing the height of the <div>.
0
 
PagodNaUtakAuthor Commented:
I still could not see the top and bottom border.. attached is the aspx page
#container
{
	position:relative;
	top:-8px;
	left:-8px;
	width:950px;
	height:900px;
	margin: 0 0 0 0;
}

a.menu:link        
{  
        color:black;  
        text-decoration:none;  
        border-right: solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
}  
a.menu:visited     
{  
        color:black;  
        text-decoration:none;  
        border-right: solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
        }  
a.menu:hover  
    {color:black;  
    text-decoration:none;  
    background-color:Transparent;  
    border:solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
        }  
a.menu:active      
        {color:black;  
    text-decoration:none;  
    background-color:transparent;  
        border:solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
        }  
  

#header
{
	width:950px;
	height:100px;
	border:solid 1px black;
	background-image:url('../images/BannerTop.jpg');
	background-repeat:repeat-x;
	background-position:left;
	
}

#logo
{
	background-image:url('../images/AvanadeLogo.jpg');
	background-repeat:no-repeat;
	background-position:left;
	width:250px;
	height:100px;
	border-right: solid 1px white;
}

#celebratingText
{
	border-bottom: solid 1px white;	
	height:40px;
	position:absolute;
	top:10px;
	left:251px;
	width:700px;
	color:White;
	font-family:Nina;
	font-size:26px;	
	padding:0 0 0 5px;
}

#loginStatus
{
	position:absolute;
	top:10px;
	left:890px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	font-weight:bold;
	font-size:13px;
	color:White;
}

#loginInformation
{
left:850px;	
font-weight:bold;
font-size:13px;
color:#663300;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
}

#menu 
{
	position:absolute;
	top:60px;
	left:250px;
	width:700px;
	padding:0 0 0 5px;
	height:50px;
}

#left, #middle, #right
{
	position:absolute;
	/* border:solid 1px black;	*/
}

#left
{
	margin:0 10px 0 0;
	width:250px;
	top:140px;
	left:0px;		
}

#middle
{
	width:450px;
	top:140px;
	left:250px;	
}

#right
{
	width:250px;
	top:140px;
	left:700px;
}

Open in new window

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="CelebratingPerformance.Default" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <link href="css/Masterpage.css" type="text/css" rel="Stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="header">
            <div id="logo">
            </div>
            <div id="celebratingText">
                Celebrating Performance</div>
            <div id="menu">
            <a href="javascript:void(0);" class="menu">Home </a><a href="javascript:void(0);"
                    class="menu">My Account </a><a href="javascript:void(0);" class="menu">Recognize
                </a><a href="javascript:void(0);" class="menu">Anniversary </a><a href="javascript:void(0);"
                    class="menu">Program </a><a href="javascript:void(0);" class="menu">Rewards
                </a><a href="javascript:void(0);" class="menu">Help </a><a href="javascript:void(0);"
                    class="menu">Contact Us </a>
            </div>
            <div id="loginStatus">
                <asp:LoginStatus ID="LoginStatus1" runat="server" Font-Underline="false" ForeColor="White" LogoutText="Log out" />
            </div>
        </div>
        <div id="loginInformation">
            <b>Home</b><br />
            <asp:LoginName ID="LoginName1" runat="server" />
        </div>
        <div id="left">
            <asp:ContentPlaceHolder ID="ContentPlaceHolderLeft" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="middle">
            <asp:ContentPlaceHolder ID="ContentPlaceHolderMiddle" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="right">
            <asp:ContentPlaceHolder ID="ContentPlaceHolderRight" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
please confirm if were able to see the same in the code that i had shared.
0
 
PagodNaUtakAuthor Commented:
@grvinder372,

I tried the code it is still the same no top and bottom border.
0
 
PagodNaUtakAuthor Commented:
The code that you provided is what I posted in this thread: ID:34904087
0
 
Gurvinder Pal SinghCommented:
but i am able to see the same on IE8 and Safari4.

I am not able to see my code any where else in this post. Please point me to that post where you had already posted this code
0
 
Dave BaldwinFixer of ProblemsCommented:
And the problem only shows up in IE, Firefox displayed it the way you wanted to begin with.
0
 
PagodNaUtakAuthor Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.