Forum Moderators: not2easy
What's the best way to go about getting help? Should I post all the code? I believe I've gotten in trouble before for posting the website link... I just want to do this the right way so I don't upset the powers that be...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/css">
#diagramPosition {
position: absolute;
top: 221px;
width: 1024px;
height: 325px;
overflow: hidden;
z-index: 1;
}
#diagram, #diagram li.item1 a, #diagram li.item2 a, #diagram li.item3 a, #diagram li.item4 a, #diagram li.item5 a, #diagram li.item6 a, #diagram li.item1 a i, #diagram li.item2 a i, #diagram li.item3 a i, #diagram li.item4 a i, #diagram li.item5 a i, #diagram li.item6 a i {
background:url(http://www.example.com/images/BODY_Residential_Diagram.jpg) no-repeat 0 0;
}
#diagram li.item1 a span, #diagram li.item2 a span, #diagram li.item3 a span, #diagram li.item4 a span, #diagram li.item5 a span, #diagram li.item6 a span, #diagram li.item1 a i, #diagram li.item2 a i, #diagram li.item3 a i, #diagram li.item4 a i, #diagram li.item5 a i, #diagram li.item6 a i {
display: none;
}
#diagram {
margin: 0; padding: 0;
list-style: none;
width:1024px;
height: 325px;
padding-top: 16px;
position: relative;
}
#diagram li.item1 a, #diagram li.item2 a, #diagram li.item3 a, #diagram li.item4 a, #diagram li.item5 a, #diagram li.item6 a {
float: left;
clear: left;
height: 27px;
width: 215px;
}
#diagram li.item1 a i, #diagram li.item2 a i, #diagram li.item3 a i, #diagram li.item4 a i, #diagram li.item5 a i, #diagram li.item6 a i {
background-position: 100% 0;
}
#diagram li.item1 a:hover i, #diagram li.item2 a:hover i, #diagram li.item3 a:hover i, #diagram li.item4 a:hover i, #diagram li.item5 a:hover i, #diagram li.item6 a:hover i {
cursor: pointer;
display: block;
position: absolute;
width: 794px;
height: 325px;
left: 230px;
top: 0;
}
#diagram li.item1 a {background-position: 0 -16px;}
#diagram li.item1 a:hover {background-position: 0px -341px;}
#diagram li.item1 a:hover i {background-position: -230px -325px}
#diagram li.item2 a {background-position: 0 -43px;}
#diagram li.item2 a:hover {background-position: 0px -693px;}
#diagram li.item2 a:hover i {background-position: -230px -650px;}
#diagram li.item3 a {background-position: 0 -70px;}
#diagram li.item3 a:hover {background-position: 0px -1045px;}
#diagram li.item3 a:hover i {background-position: -230px -975px;}
#diagram li.item4 a {background-position: 0 -97px;}
#diagram li.item4 a:hover {background-position: 0px -1397px;}
#diagram li.item4 a:hover i {background-position: -230px -1300px;}
#diagram li.item5 a {background-position: 0 -124px;}
#diagram li.item5 a:hover {background-position: 0px -1749px;}
#diagram li.item5 a:hover i {background-position: -230px -1625px;}
#diagram li.item6 a {background-position: 0 -151px;}
#diagram li.item6 a:hover {background-position: 0px -2101px;}
#diagram li.item6 a:hover i {background-position: -230px -1950px;}
</style>
</head>
<body>
<div id="diagramPosition">
<ul id="diagram">
<li class="item1"><a href="page1.htm"><span>page1</span><i></i></a></li>
<li class="item2"><a href="page2.htm"><span>page2</span><i></i></a></li>
<li class="item3"><a href="page3.htm"><span>page3</span><i></i></a></li>
<li class="item4"><a href="page4.htm"><span>page4</span><i></i></a></li>
<li class="item5"><a href="page5.htm"><span>page5</span><i></i></a></li>
<li class="item6"><a href="page6.htm"><span>page6</span><i></i></a></li>
</ul>
</div>
</body>
</html>
But the code looks rather complex, perhaps a bit
I don't immediately grasp what the <span> and <i> are used for.
The <span> stays display:none ?
and the <i> gets display block when the parent <a> is hovered ?
That's a significant restyling and redraw on a :hover ... I'd try to make that easier on the browsers and actually style it all in the normal state and then just swap the display or even visibility property on hover, trying to have as little as possible change in the :hover state.
The big question is "causes the sprite to meltdown and not work": explain this in a few sentences ... so we can have a start at remembering what FF2 didn't like ?
[I'm not sure for your visitors, but my Firefox visitors do tend to upgrade their browsers]
debugging sprites: first try it with solid colored backgrounds and see if they work as intended, only then start with an image and positioning of it.
