...

View Full Version : Resolved Background images show in FireFox and IE but not Chrome



Apothem
12-13-2009, 12:36 AM
Here's my site:
http://mv.asuraphase.com/

This is the CSS code I use:

#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

<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?

SB65
12-13-2009, 09:26 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum