Solved

How to set link height via CSS

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now