asked on

How to set link height via CSS

I am trying to prototype a server control in Visual Studio 2008. I am using ASP.Net 3.5. For some reason I cannot set the height of link tag. The image it is using is a 24 pixels tall and it looks like the link tag only uses 22 pixels. Below is the sample code which also has the CSS associated with it. I attached one image that shows how the button is being cut off at the bottom. The other image is the Gif file used with the code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CustomControlsTestPage._Default" %>
 
<%@Register TagPrefix="APRCC" Namespace="APR.CustomControls.Web" Assembly="APR.CustomControls" %>
 
<!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></title>
    <style type="text/css">
        .rtsIn
        {
            font: 17px/28px "TW Cen MT Condensed Extra Bold" , "segoe ui" ,arial,sans-serif;
            padding: 0px 9px 0px 0;
        }
        .rtsTxt
        {
            padding: 0;
        }
        .rtsIn
        {
            height: 24px;
        }
        .rtsLink
        {
        	position: relative;
        	top: 0px;
        	left: 0px;
        	height: 24px;
	        text-decoration: none;
	        background: transparent url('Red Buttons.gif') no-repeat 0 0;
        }   
        .rtsOut
        {
            text-align: center;
            background: transparent url('Red Buttons.gif') no-repeat 100% 0;
            color: white;
            margin-left: 12px;
        }
        .rtsLink:hover 
        { 
        	background: transparent url('Red Buttons.gif') no-repeat 0 -24px; 
        }
        .rtsLink:hover .rtsOut
        {
            background: transparent url('Red Buttons.gif') no-repeat 100% -24px;
            margin-left: 12px;
        }
        .rtsSelected 
        { 
        	background: transparent url('Red Buttons.gif') no-repeat 0 -48px;  
	        text-decoration: none;
        }        
        .rtsSelected .rtsOut 
        { 
        	background: transparent url('Red Buttons.gif') no-repeat 100% -48px; 
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a class="rtsLink" href="#">
            <span class="rtsOut">
                <span class="rtsIn">
                    <span class="rtsTxt">
                        Management
                    </span>
                </span>
            </span>
        </a>
    </div>
    </form>
</body>
</html>

Open in new window

Cut-Off-Button.bmp
Red-Buttons.gif

DeHaynes

ASKER

I forgot to add, the the CSS needs to work with IE 7+ and Firefox 3+.

ASKER CERTIFIED SOLUTION

prairiedog

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DeHaynes

ASKER

padding: 0px 0px 3px 0px on the inside span worked! Thanks.