Trouble Hacking Sliding Doors Technique

[trigger]

http://www.nasi.com/gsi/digital_asset_management.php

Here's my try. I tried to hack a few things. I put the smaller image on the right side instead of the left, and I tried applying to divs and span tags.

Here's my code

<div id="top">
<h1>
	<a href="/gsi/index.php" title="Graphic Systems International Homepage">GSI Homepage</a>
</h1>
<span>
	<ul>
	<li><a href="../GSI/digital_prepress_workflow.php">Prepress Workflow</a></li>
	<li><a href="../GSI/digital_asset_management.php">Digital Asset Management</a></li>
	<li><a href="../GSI/backup_archival.php">Backup/Archival</a></li>
	</ul>
</span>
</div>

and here is the css

#top{
	display: block;
	background: url(../../images/gsi_top.jpg) no-repeat left top;
	margin:0;
    padding:0 18px 0 0;
	float: left;
}
#top span{
	float: right;
	background: url(../../images/gsi_top_r.jpg) no-repeat right top;
	display: block;
	padding:5px 30px 4px 12px;
	width: auto;
}

I feel like I'm close, and just need to tweak the padding values, but editing CSS using FF's Web Dev toolbar doesn't seem to move stuff around enough. What am I doing wrong?

[jthale]

I don't see what this has to do with the sliding doors (isn't that for tabs?). What are you trying to accomplish?

[Buddy Bradley]

Sliding doors would have the background images applied to the LI a A elements inside the UL - not sure what you're trying to do here. You can't put a UL inside a SPAN anyway.