Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: facebook-footer

  1. #1
    Regular Coder Mihai's Avatar
    Join Date
    Jan 2008
    Posts
    122
    Thanks
    14
    Thanked 0 Times in 0 Posts

    facebook-footer

    <div id="facebook-footer">
    <div id="controls">
    <div>
    <ul>
    <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>
    </ul>
    </div>
    </div>
    </div>


    div#facebook-footer * {padding: 0; margin: 0;}
    div#facebook-footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:30px;
    background: none;
    color:black;
    font:11px Verdana, Geneva, sans-serif;
    }
    @media screen {
    body>div#facebook-footer {
    position:fixed;
    }
    }
    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
    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

  • #2
    Regular Coder Mihai's Avatar
    Join Date
    Jan 2008
    Posts
    122
    Thanks
    14
    Thanked 0 Times in 0 Posts
    First imagine works

  • #3
    Regular Coder Mihai's Avatar
    Join Date
    Jan 2008
    Posts
    122
    Thanks
    14
    Thanked 0 Times in 0 Posts
    anyone ?
    if i remove <li class="icon"> and leave <img src="images/shape_square.png" title="shape"/>
    then i can see the imagine.

  • #4
    Regular Coder Mihai's Avatar
    Join Date
    Jan 2008
    Posts
    122
    Thanks
    14
    Thanked 0 Times in 0 Posts
    any ideas anyone ?

  • #5
    New Coder
    Join Date
    Feb 2011
    Location
    Melbourne, Australia
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    whats your CSS say about class=icon?
    can you paste related CSS??


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •