Hi all, I wonder if a guru could help me out with my (attempted)
implementation of sprites and image replacement. Below is the css
and html which works fine in firefox and internet explorer (as far as
I can tell) and an example can be seen at http://www.rollandburn.com
I get the feeling I'm missing something important with the sprites
because there should be no need to keep repeating...
background: url(linkGrid_sectionTabs.gif) -240px -15px no-repeat;
...in the css for each of the tabs. I thought I could simply put
that under the #tabNav li {} and for each of the tabs all I would
have to set is the positioning but unfortunately the way I have it
below is the only way I could get it to work.
Arg!
I know my IR technique probably leaves a lot to be desired. =[
Thanks for any suggestions or advice to improve. =]
HTML_____________________________________
<ul id="tabNav">
<li id="tab_dashboard"><a href="/" title="Dashboard">Dashboard</a></li>
<li id="tab_addMort"><a href="/" title="Add Mortgage">Add Mortgage</
a></li>
<li id="tab_search"><a href="/" title="Search">Search</a></li>
<li id="tab_reports"><a href="/" title="Reports">Reports</a></li>
</ul>
CSS______________________________________
#tabNav {
margin: 0;
padding: 0;
position: relative;
}
#tabNav li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
width: 120px;
height: 15px;
text-indent: -5000px;
font-size: 1px;
}
#tabNav li, #tabNav a {
height: 15px;
display: block;
}
#tab_dashboard { background: url(linkGrid_sectionTabs.gif) -240px
-30px no-repeat; left: 0; }
#tab_dashboard a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -30px no-repeat; }
#tab_addMort { background: url(linkGrid_sectionTabs.gif) -240px 0 no-
repeat; left: 120px; }
#tab_addMort a:hover { background: url(linkGrid_sectionTabs.gif)
-120px 0px no-repeat; }
#tab_search { background: url(linkGrid_sectionTabs.gif) -240px -15px
no-repeat; left: 240px; }
#tab_search a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -15px no-repeat; }
#tab_reports { background: url(linkGrid_sectionTabs.gif) -240px -45px
no-repeat; left: 360px; }
#tab_reports a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -45px no-repeat; }
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
