?
Solved

How to set link height via CSS

Posted on 2008-10-15
3
Medium Priority
?
1,456 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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
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 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…
Suggested Courses
Course of the Month15 days, 12 hours left to enroll

850 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