View Full Version : facebook-footer

08-12-2010, 03:21 AM
<div id="facebook-footer">
<div id="controls">
<li class="icon"><img src="images/shape_square.png" title="shape"/></li>
<li class="text">Applications</li>
<li class="separator">&nbsp;</li>
<li class="icon"><img src="images/world.png" alt="Angry face" title="world"/></li>
<li class="separator">&nbsp;</li>
<li class="icon"><img src="images/pictures.png" title="pictures"/></li>
<li class="icon"><img src="images/group.png" title="group"/></li>
<li class="icon"><img src="images/date.png" title="date"/></li>
<li class="icon"><img src="images/newspaper.png" title="newspaper"/></li>
<li class="chat">Chat (0)</li>
<li class="icon-chat"><img src="images/status_offline.png" title="offline"/><img src="images/bullet_red.png" title="bullet"/></li>
<li class="chat separator">&nbsp;</li>

div#facebook-footer * {padding: 0; margin: 0;}
div#facebook-footer {
background: none;
font:11px Verdana, Geneva, sans-serif;
@media screen {
body>div#facebook-footer {
div#facebook-footer div#controls {
background: #fff;
margin: 0 20px 0 20px;
line-height: 29px;
border: 1px solid #b5b5b5;
border-bottom: none;
div#facebook-footer div#controls div {
background: #e5e5e5;
margin-top: 1px;
padding: 0 10px 0 10px;
div#facebook-footer .separator {
border-left: 1px solid #b5b5b5;
margin-left: 3px;
div#facebook-footer div#controls ul, li {
margin: 0;
padding: 0;
div#facebook-footer div#controls ul {
list-style: none;
div#facebook-footer div#controls li {
display: inline-block;
line-height: 27px;
height: 29px;
padding-right: 6px;
div#facebook-footer .icon {
vertical-align: text-bottom;
div#facebook-footer .icon-chat {
padding-top: 3px;
div#facebook-footer .chat, .icon-chat {
float: right;
div#facebook-footer .text {
vertical-align: top;
Works fine in firefox but in Iexplore imagines are not showing :confused:
I've been reading online "Tip: The alt attribute is meant to be used as an alternative text if the image is not available, not as a mouse-over text. To show a mouse-over text on images or image-maps, use the title attribute, like this: <img src="angry.gif" alt="Angry face" title="Angry face" />" but i did not got the text alt="Angry face" , then i been thinking that maybe closing / is missing from img tag ( original script did not had it ), but nothing ..
Any ideas ?
Thank you

08-12-2010, 03:25 AM
First imagine works ;)

08-12-2010, 08:39 PM
anyone ?
if i remove <li class="icon"> and leave <img src="images/shape_square.png" title="shape"/>
then i can see the imagine. :confused:

08-13-2010, 03:53 AM
any ideas anyone ?

02-18-2011, 07:47 AM
whats your CSS say about class=icon?
can you paste related CSS??