Solved

How to set link height via CSS

Posted on 2008-10-15
3
1,440 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

688 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