Forum Moderators: not2easy
Could be a margin issue. Maybe some padding-top: or line-height: would 'hack' it. Maybe the height of the footer box?
#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 -->
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]
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>
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;
}
