3 replies [Last post]
ironclads
ironclads's picture
Offline
newbie
Last seen: 2 years 31 weeks ago
Timezone: GMT-7
Joined: 2012-01-20
Posts: 4
Points: 5

I have started using sprite images to cut down on download time. I'm having an issue. Basically the sprite image displays outside of the span it's in until I click on it. Perhaps you have an idea on why this is happening or perhaps I'm doing something CSS doesn't like. Here's an example of a document that has the new code that contains the sprite:

http://skylab.ironclads.com/P&P/pp682Dev.nsf/(DO)?OpenAgent&TEMP=JklEPTMyMUFFQjlDREZCRDI1MDU4NzI1Nzk4QjAwN0NFMTcxJkxDSz1ZZXM=&LGN=UE5QQXV0bzEwIExvZ2luVXNlci9Jcm9uY2xhZHM9U0tZQjhNVTdFUA==

FYI, only the header and body tabs are updated to the new code. The CSS code referenced from the "policyIMG.css" is as follows:

.1_1 {display:inline; float:left; width:49px; overflow:hidden; position:relative; height:39px;}
.1_1 img {position:relative; top:0px; left:0px;}
.1_1 a:hover{position:relative; top:-40px; left:-0px;}

.1_1_1 {display:inline; float:left; width:49px; overflow:hidden; position:relative; height:39px;}
.1_1_1 img {position:relative; top:-80px; left:0px;}

.1_2 {display:inline; float:left; width:34px; overflow:hidden; position:relative; height:39px;}
.1_2 img {position:relative; top:0px; left:-50px;}
.1_2 a:hover{position:relative; top:-40px; left:0px;}

.1_2_1 {display:inline; float:left; width:34px; overflow:hidden; position:relative; height:39px;}
.1_2_1 img {position:relative; top:-80px; left:-50px;}

.1_3 {display:inline; float:left; width:67px; overflow:hidden; position:relative; height:39px;}
.1_3 img {position:relative; top:-0px; left:-85px;}
.1_3 a:hover{position:relative; top:-40px; left:0px;}

.1_4 {display:inline; float:left; width:94px; overflow:hidden; position:relative; height:39px;}
.1_4 img {position:relative; top:-0px; left:-153px;}
.1_4 a:hover{position:relative; top:-40px; left:0px;}

.1_5 {display:inline; float:left; width:32px; overflow:hidden; position:relative; height:39px;}
.1_5 img {position:relative; top:0px; left:-248px;}
.1_5 a:hover{position:relative; top:-40px; left:0px;}

Thank you for your help and looking.

ironclads
ironclads's picture
Offline
newbie
Last seen: 2 years 31 weeks ago
Timezone: GMT-7
Joined: 2012-01-20
Posts: 4
Points: 5

Additional Information

It doesn't look like my link to the document came across. I'm trying to add it again and also include the source code in a file.

<a href="http://skylab.ironclads.com/P&P/pp682Dev.nsf/" rel="nofollow">http://skylab.ironclads.com/P&P/pp682Dev.nsf/</a>(DO)?OpenAgent&TEMP=JklEPTMyMUFFQjlDREZCRDI1MDU4NzI1Nzk4QjAwN0NFMTcxJkxDSz1ZZXM=&LGN=UE5QQXV0bzEwIExvZ2luVXNlci9Jcm9uY2xhZHM9U0tZQjhNVTdFUA==

Refer to the txt document for the source. Start by searching for "SPAN ID="TAB1_EMPTY"" or "SPAN ID="TAB1_1"" This is where the sprites are contained.

Thank you again.

AttachmentSize
htmlsource.txt 207.16 KB
img1.gif 54.51 KB
img2.gif 50.8 KB
ironclads
ironclads's picture
Offline
newbie
Last seen: 2 years 31 weeks ago
Timezone: GMT-7
Joined: 2012-01-20
Posts: 4
Points: 5

Document Link

If you want to see the actual document I'm breaking the link up across 3 lines. Just put the three lines back together in the address bar:

http://skylab.ironclads.com/P&P/pp682Dev.nsf/(DO)?OpenAgent&TEMP=
JklEPTMyMUFFQjlDREZCRDI1MDU4NzI1Nzk4QjAwN0NFMTcxJkxDSz1ZZXM=
&LGN=UE5QQXV0bzEwIExvZ2luVXNlci9Jcm9uY2xhZHM9U0tZQjhNVTdFUA==

ironclads
ironclads's picture
Offline
newbie
Last seen: 2 years 31 weeks ago
Timezone: GMT-7
Joined: 2012-01-20
Posts: 4
Points: 5

Kind of a fix...

I'm leaving the fixed code out in case someone wants to view things not aligning correctly. Basically the fix I figured out was at load time I iterrate through the tabs, opening each one, then closing them up again. That seems to align the images. Any other thoughts or ideas why this does what is does is very much appreciated.