Welcome to WebmasterWorld Guest from 54.163.100.58

Forum Moderators: not2easy

css footer text overlapped

   
5:18 pm on Jun 22, 2008 (gmt 0)

5+ Year Member



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.
8:30 pm on Jun 22, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?

1:58 am on Jun 23, 2008 (gmt 0)

5+ Year Member



#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 -->
3:28 am on Jun 23, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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]

4:06 am on Jun 23, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



#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>

10:05 am on Jun 23, 2008 (gmt 0)

5+ Year Member



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;
}

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month