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 2 of 2
  1. #1
    Regular Coder Apothem's Avatar
    Join Date
    Mar 2008
    Posts
    380
    Thanks
    36
    Thanked 25 Times in 25 Posts

    Background images show in FireFox and IE but not Chrome

    Here's my site:
    http://mv.asuraphase.com/

    This is the CSS code I use:
    Code:
    #tbwrap {
    	height:30px;
    	width:90%;
    	bottom:0px;
    	position:fixed;
    	right: 5%;
    	background: #404040;
    	border: 1px solid #191919;
    	border-bottom: none;
    	-moz-border-radius-topleft: 5px;
    	-webkit-border-top-left-radius: 5px;
    	-moz-border-radius-topright: 5px;
    	-webkit-border-top-right-radius: 5px;
    }
    
    #tbwrap a {
    	outline: 0;
    	margin-right: 10px;
    }
    
    #tbleft, #tbcenter, #tbright {
    	height: 30px;
    	display: block;
    	padding-top: 7px;
    }
    
    #tbleft {
    	margin-left: 14px;
    	padding-right: 5px;
    	float: left;
    }
    
    #tbcenter {
    	text-align: center;
    	display: inline;
    	display: block;
    	padding-right: 10px;
    }
    
    #tbright {
    	float: right;
    	padding-left: 7px;
    	padding-right: 2px;
    }
    
    #tb_home, #tb_expand, #tb_collapse, #tb_top, #tb_first, #tb_prev, #tb_next, #tb_last, #tb_nofirst, #tb_noprev,
    #tb_nonext, #tb_nolast, #tb_chat, #tb_nochat, #tb_bookmark, #tb_debookmark, #tb_shelf, #tb_deshelf {
    	background: url(toolbar/tbimg.png);
    	padding-left: 16px;
    	height: 16px;
    }
    
    #tb_home{background-position:0 0}
    #tb_collapse{background-position:48px -16px}
    #tb_expand{background-position:48px -32px}
    #tb_last{background-position:16px 0}
    #tb_nolast{background-position:16px -16px}
    #tb_next{background-position:32px 0}
    #tb_nonext{background-position:32px -16px}
    #tb_top{background-position:48px 0}
    #tb_prev{background-position:64px 0}
    #tb_noprev{background-position:64px -16px}
    #tb_first{background-position:80px 0}
    #tb_nofirst{background-position:80px -16px}
    
    #tb_chat{background-position:32px -32px}
    #tb_nochat{background-position:16px -32px}
    
    #tb_bookmark{background-position:80px -32px}
    #tb_debookmark{background-position:64px -32px}
    #tb_shelf{background-position:0 -16px}
    #tb_deshelf{background-position:0 -32px}
    The HTML
    Code:
    <div id="tbwrap">
    <p id="tbright">
    <a href="javascript:void(0)" title="Chat" id="tb_chat" onclick="openCB()"><span></span></a>
    <a href="javascript:void(0)" title="Collapse Toolbar" id="tb_collapse" onclick="tbCollapse()" /><span></span></a>
    </p>
    
    <p id="tbleft">
    <a href="/" title="Home" id="tb_home"><span></span></a>
    </p>
    </div>
    This is suppose to display background images for the toolbar I have at the bottom of my site. It does this correctly for FF 3.5 and IE 8, but for some reason Chrome and Safari doesn't show the background images. What's wrong?
    Last edited by Apothem; 12-13-2009 at 05:23 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    By experimentation, it seems Safari/Chrome don't like the empty <span> tags. Remove these and the background image shows fine.

    Another possibility, arguably better, although it won't work with your sprites, is to display the image directly on the page rather than as a background image.


  •  

    Posting Permissions

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