homepage Welcome to WebmasterWorld Guest from 54.237.98.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css footer text overlapped
jynx

5+ Year Member



 
Msg#: 3680877 posted 5:18 pm on Jun 22, 2008 (gmt 0)

i have a footer setup nicely in css. excepty the text is looking like its being cutoff from the top and bottom. for example a "p" looks like an "o" because the line making it a p is cutoff. Almost seems like the text is not on top of the footer.

 

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3680877 posted 8:30 pm on Jun 22, 2008 (gmt 0)

Welcome to WebmasterWorld. How about providing enough CSS and HTML to recreate the problem?

Could be a margin issue. Maybe some padding-top: or line-height: would 'hack' it. Maybe the height of the footer box?

jynx

5+ Year Member



 
Msg#: 3680877 posted 1:58 am on Jun 23, 2008 (gmt 0)

#footer {
background: #fff;
margin: 0;
border: 1px;
padding: 5px;
/*width: 100%; /*For KHTML*/
height: 15px;
list-style: none;
text-align : center;
clear:both;
}
#footer ul {
padding: 0px;
font : 0.7em/0.7em Helvetica, Verdana, Arial, sans-serif;
}

#footer li {
margin: 0;
padding: 0px;
float: left;
display : inline;
padding-left: 10px;
padding-right : 10px;
border: 1px solid #fff;
border-right-color: #000;
}

#footer a:link, #right a:visited {
text-decoration : none;
color : #000;
}

#footer a:hover {
text-decoration : underline;
color : #fff;
}

#footer a:active {
text-decoration : none;
color : #fff;
}

thats the css

and now the html
...
<!-- START footer -->
<div id="footer">
<ul>
<li>Copyright 2008 Summit Private Capital Group</li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Designed by BA</a></li>
</ul>
</div> <!-- END footer -->
</div> <!-- END page -->

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3680877 posted 3:28 am on Jun 23, 2008 (gmt 0)

The line height is chopping off the bottom of the line in IE. (OK in FF and Opera.) Increase line-height:

font: .7em/1em Helvetica, Verdana, Arial, sans-serif;

Looking at another cross browser variance and a couple of other minor matters. May report back.

<edit - ticky tack>

[edited by: D_Blackwell at 3:50 am (utc) on June 23, 2008]

D_Blackwell

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3680877 posted 4:06 am on Jun 23, 2008 (gmt 0)

#footer {
border: 1px; etc.

I inserted the logical extension of this border to get a better look at what was happening - aside from the line-height: fix, which seems sufficient to address the initial question.

I was concerned that the CSS needed some clean-up, and always best to start with peeking under the hood.

Add this full border declaration for #footer -
border: 1px solid #000;

Note that this renders completely different results in FF, Opera, and IE - and not good.

I noted but ignored the issue and did a general clean-up of the entire CSS. When I refreshed, the problem was gone, and rendered well in all three browsers, so can't say just what was happening as I fixed it mostly be accident:))

Note: I made some color changes to <a> in order to get a better view of what was happening with the links. You probably won't want {color: green;} in a:active - You may not really want that border around #footer. I've just made some adjustments, suggestions, and illustrations.

Hope this helps. Somebody else might be right behind me with a better mousetrap though:))

<html>
<head>
<style>
#footer {
background: #fff;
margin: 0;
border: 1px solid #000;
padding: 5px;
width: 100%; /*For KHTML*/
height: 15px;
clear: both;
}
#footer ul {
margin: 0;
padding: 0px;
font: .7em/1em Helvetica, Verdana, Arial, sans-serif;
}
#footer li {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
padding: 0 10px;
border-right: 1px solid #000;
}
#footer a:link, #footer a:visited {
text-decoration: none;
color: #000;
}
#footer a:hover {
text-decoration: underline;
color: #900;
}
#footer a:active {
color: green;
}
</style>
</head>
<body>
<div id="footer">
<ul>
<li>Copyright 2008 Summit Private Capital Group</li>
<li><a href="http://www.example.com">Sitemap</a></li>
<li><a href="http://www.example.com">Designed by BA</a></li>
</ul>
</div>
</div>
<!--
i have a footer setup nicely in css. excepty the text is looking like its being cutoff from the top and bottom. for example a "p"

looks like an "o" because the line making it a p is cutoff. Almost seems like the text is not on top of the footer.
-->
</body>
</html>


appi2

5+ Year Member



 
Msg#: 3680877 posted 10:05 am on Jun 23, 2008 (gmt 0)

In both the examples its the height of the footer div thats causing problems. Increase the font size in your browser to see it get worse.

Change the height from pixels to em to stop having this problem.

From your original code.

#footer {
font-size:1em;
background: #fff;
margin: 0;
border: 1px solid #000;
padding: 0.3em;
width: 100%; /*For KHTML*/
/*next line stops footer collapsing*/
overflow:hidden;
clear: both;
}
#footer ul {
margin: 0;
padding: 0px;
font: .7em/1em Helvetica, Verdana, Arial, sans-serif;
}
#footer li {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
padding: 0 10px;
border-right: 1px solid #000;
/*Next line using em so when user changes font size the text isnt cut*/
height: 1em;
}
#footer a:link, #footer a:visited {
text-decoration: none;
color: #000;
}
#footer a:hover {
text-decoration: underline;
color: #900;
}
#footer a:active {
color: green;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved