Solved

How to set link height via CSS

Posted on 2008-10-15
3
1,433 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP.NET Calendar Control 5 30
Adding where clause to entity statement c# 1 49
CSS - Centering an image 2 28
center navbar (navigation menu) on web page 3 25
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 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