Solved

How to set link height via CSS

Posted on 2008-10-15
3
1,420 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
Comment Utility
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
Comment Utility
Try:
padding: 0px 0px 0px 0;

Open in new window

0
 

Author Comment

by:DeHaynes
Comment Utility
padding: 0px 0px 3px 0px on the inside span worked!  Thanks.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

772 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

10 Experts available now in Live!

Get 1:1 Help Now