asked on

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,

SOLUTION

Carlos Llanos

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dkim18

ASKER

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

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dkim18

ASKER

thanks all....your comments helped to solve my issue.