• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2765
  • Last Modified:

Bottom of font descenders cut off

Hi Experts,

I have font descenders cut off issue on a login page that I am working on.

this is a footer section
<div id="foot">
			<a href="http://www.xxx.org/" rel="external" title="xxx"><img src="./images/xxx.png" alt="xxx" /></a> 
			<ul><li >
			
			<a  href="xxx.org" style="text-decoration: none;" title="Send an Email"><span class ="underline">Contact Us</span></a></li>
			    <li>The Xxxxgxxxx Xxpxxxx Xxxx</li> <!-- *********the letter 'g' and 'p' descenders are cut off ********-->
			    <li>xxxxx</li><li>xxx, xx 77777</li> 
			    <li>777-777-7777</li>
			
			   
			  
			</ul>
			<a href="http://www.xxx.org/" rel="external" title="xxx"><img src="./images/xxx.png" width="200" height="18" alt="xxx" /></a> 
			 
			 
			
			<ul><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
			<a href="xxxx.org" style="text-decoration: none;" title="Send an Email"><span class ="underline">Contact Us</span></a></li>
			    <li>xxxxxxxxxx</li>
			    <li>xxxxxxx</li><li>xxxxx, xx 77777</li> 
			    <li>777-777-7777</li><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			
			  
			</ul>
			 
			 
			
		</div>



//this is from css file.
/* *****************
FOOTER
***************** */

#foot {
	clear: both;
	height: 110px;
	background: url(./css_images/gradient05.png) 0 0;
	z-index: 50;
	overflow: hidden;		
}
#foot img {
	margin: 10px 10px -20px 20px;
}

#foot ul {
	position: relative;
	top: -2px;
	display: block;
	width: 760px;
	height: 10px;/* spacing between KKI address and OIF address*/
	margin-left: 190px;
	font-size: 12px
}

#foot ul  li {
	display: inline;
	margin: 4px;
}

#foot ul  li:first-child {
	margin-left: 0;
}

#foot a {
	color: black
	text-decoration: none;
} 

Open in new window


thanks in advance,
0
dkim18
Asked:
dkim18
  • 2
2 Solutions
 
Andrew DerseIT ManagerCommented:
This is what I see, I am seeing small text with the font descenders fully visible...is it css code elsewhere on the page that is changing this?

3
0
 
dkim18Author Commented:
there are some other css files.


ieFixes.css
#content { overflow-x: hidden } 
#leftcol { margin-top: 10px } 
#leftcol ul, #leftcol ul li { margin-top: 0; }
acronym, abbr {
	border-bottom: 1px dotted #EEE;
	padding-bottom: -1px;
}
#twocol h2:first-child, #twocol ul:first-child, #twocol dl:first-child, #twocol p:first-child { 
	margin-top: 32px;
}
ul#calendar li {
	zoom: 1;
    *display: inline;
}

#twocol dl.bioStyleTwo dd image {
	margin-top: 15px
}

body#research li h3 { display: inline !important }

#content div#header{
	position: relative;
	top: 0px;
	zoom: 1;
	z-index: 100
}

#content {
overflow: visible
}

#content dl.bioStyleOne { clear: both }

Open in new window


form.css
/* ******************************

	REGISTERY FORM
	
***************************** */

form#searchEmail {
	position: relative;
	display: block;
	height: 400px;
	width: 620px;
	background: url(./css_images/formsprite.png) no-repeat 0 0;
}
form#searchEmail legend span {
	position: absolute;
	top: 20px;
	left: 29px;
	display: block;
	width: 230px;
	height: 36px;
	background: url(./css_images/formsprite.png) no-repeat -73px -648px;
}
form#searchEmail input.text {
	display: block;
/*	position: relative;
	top: -14px;
	left: 2px; */
	float: right;
	border: 0;
	padding: 15px 10px 0 10px;
	height: 27px;
	width: 233px;
	background: url(./css_images/formsprite.png) no-repeat -180px -468px;
}
form#searchEmail input.text:focus {
	background: url(./css_images/formsprite.png) no-repeat -180px -414px;
}
form#searchEmail label {
	float: left
}
	
form#searchEmail ol {
	position: absolute;
	width: 434px;
	top: 112px;
	left: 29px;
	list-style: none;
}
form#searchEmail ol li {
	padding: 0;
	margin: 0;
	clear: both;
	height: 42px;
}
li#emaillabel  label {
	height: 42px;
	width: 174px;
	background: url(./css_images/formsprite.png) no-repeat 0 -414px;
}

li#passwordlabel  label {
	height: 42px;
	width: 174px;
	background: url(./css_images/formsprite.png) no-repeat 0 -522px;
}
form#searchEmail button {
	position: absolute;
	top: 106px;
	left: 316px;
	cursor: pointer;
	display: block;
	width: 118px;
	height: 31px;
	border: 0;
	background: url(./css_images/formsprite.png) no-repeat -504px -414px;
}

form#searchEmail button:hover, form#searchEmail button:active {
	display: block;
	width: 118px;
	height: 31px;
	border: 0;
	background: url(./css_images/formsprite.png) no-repeat -504px -468px;
}
form#searchEmail legend span > span, form#searchEmail label span, form#searchEmail h2 span, form#searchEmail button span, h2#moreinfo span {
	position: absolute; left: -1000px; top: -1000px
}

form#searchEmail h2 {
	width: 127px;
	height: 85px;
	background: url(./css_images/formsprite.png) no-repeat -504px -504px;
	position: absolute;
	top: 88px;
	left: 465px
}
form#searchEmail #register {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 1.8;
	width: 107px;
	position: absolute;
	top: 130px;
	left: 485px
}
form#searchEmail p {
	font-size: 11px;
	text-shadow: white 1px 1px 0px;
	position: absolute;
	top: 70px; 
	left: 29px
}
form#searchEmail #register a:link {
	letter-spacing: 0px;
	color: #ff6817
}

h2#moreinfo {
	position: absolute;
	top: 260px;
	left: 39px;
	display: block;
	width: 230px;
	height: 20px;
	background: url(./css_images/formsprite.png) no-repeat 0 -719px
}

ul#moreinfolinks {
	position: absolute;
	top: 310px;
	left: 39px;
	font-size: 12px;
}
ul#moreinfolinks li a:link {
	color: black
}
#moreinfolinks a:hover, #moreinfolinks a:visited {
color: black;
	text-decoration: none
}
/* *********************
MODAL
******************** */

/* Overlay */
#simplemodal-overlay {background-color:#FFF; cursor:wait;}

/* Container */
#simplemodal-container {
	position: relative;
	height: 400px; 
	width:620px; 
	overflow: hidden;
	line-height: 1.6
}
#simplemodal-container form#searchEmail #register {
	top: 125px;
}
#simplemodal-container form#searchEmail p {
top: 80px
}
#simplemodal-container h2#moreinfo, #simplemodal-container ul#moreinfolinks {
left: 29px
}
#simplemodal-container a.modalCloseImg {
	background: url(./css_images/formsprite.png) no-repeat 0 -648px; 
	width: 45px; 
	height: 45px; 
	display: block; 
	z-index: 3200; 
	position: absolute; 
	top: 20px; 
	right: 24px;
}

.js {
	visibility: hidden
}

Open in new window


print.css
ul.abstract, ul.menu, ul.studyMetaData {
list-style: none;
}
ul.abstract div {
display: block !important;
}

#header, #leftcol , .skiplink{
display: none;
}
a { color: black }

#foot ul {
	list-style: none;
}

h1 {
font-size: 14pt;
}

h2 {
font-size: 12pt;
text-transform: uppercase
}

h3 {
font-size: 12pt;
display: inline;
}

Open in new window


reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Open in new window

0
 
GaryCommented:
Remove
line-height: 1;
from reset.css
0
 
dkim18Author Commented:
thanks all....your comments helped to solve my issue.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now