Solved

How to set link height via CSS

Posted on 2008-10-15
3
1,428 Views
Last Modified: 2013-12-17
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
0
Comment
Question by:DeHaynes
  • 2
3 Comments
 

Author Comment

by:DeHaynes
ID: 22727154
I forgot to add, the the CSS needs to work with IE 7+ and Firefox 3+.
0
 
LVL 22

Accepted Solution

by:
prairiedog earned 500 total points
ID: 22730670
Try:
padding: 0px 0px 0px 0;

Open in new window

0
 

Author Comment

by:DeHaynes
ID: 22730713
padding: 0px 0px 3px 0px on the inside span worked!  Thanks.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question