Welcome to WebmasterWorld Guest from 23.20.193.33

Forum Moderators: not2easy

Message Too Old, No Replies

css footer text overlapped

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

New User

5+ Year Member

joined:June 22, 2008
posts:5
votes: 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.
8:30 pm on June 22, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 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?

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

New User

5+ Year Member

joined:June 22, 2008
posts:5
votes: 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 -->
3:28 am on June 23, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 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]

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 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>

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

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 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;
}

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members