Replacing an ul with inline images, but still using them for navigation?

[happy_hands]

Having been very much inspired by the CSS Zen Garden book and website, I've been spending the last few days trying to redevelop our old extremely table heavy website, into a bright new CSS based site.

I've really loved the 'getting back to basics' in designing for content first, layout second (I've knocked off about 75% memory, per page load, with a similar layout!). I've been trying to really stick to standards, and simple coding with as few hacks as possible, throughout the design process.

Unfortunately trying to keep everything in lists first for navigation first, I used one of the Image replacement techniques to replace the tabbed navigation list, with background images in a horizontal line, as seen at the top of the following page:

http://www.therapy-agency.com/corporate/index.html

The relevant html :

<div id="container">
<div id="header">
<div id="sectional-title-tabs">
<div id="tab1"><span><a href="#">At Your Workplace</a></span></div>
<div id="tab2"><span><a href="#">At Your Events</a></span></div>
<div id="tab3"><span><a href="#">Gift Vouchers</a></span></div>
<div id="tab4"><span><a href="#">Treatments For You</a></span></div>
<div id="tab5"><span><a href="#">Healthy Living</a></span></div>
<div id="tab6"><span><a href="#">About The Agency</a></span></div>
<div id="tab7"><span><a href="#">Secure Login</a></span></div>
<div id="tab8"><span><a href="#">Secure Login</a></span></div>
</div>
</div>
</div>

The relevant CSS :

#container {
width: 780px;
top: 0;
left: 0;
margin: 0;
padding: 0;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000033;
}

#header {
background: #FFFFFF;
text-align: left;
}

#sectional-title-tabs {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000033;
}

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7, #tab8 {
padding: 0;
margin: 0;
float: left;
height: 35px;
}

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
width: 105px;
}

#tab8 {
width: 21px;
}

#tab1 span, #tab2 span, #tab3 span, #tab4 span, #tab5 span, #tab6 span, #tab7 span, #tab8 span {
display: none;
}

#tab1 {
background: transparent url(../css/navigation/tabs/tab-01.png) right top no-repeat;
}

#tab2:hover {
background: transparent url(../css/navigation/tabs/tab-02-on.png) right top no-repeat;
}

#tab3:hover {
background: transparent url(../css/navigation/tabs/tab-03-on.png) right top no-repeat;
}

#tab4:hover {
background: transparent url(../css/navigation/tabs/tab-04-on.png) right top no-repeat;
}

#tab5:hover {
background: transparent url(../css/navigation/tabs/tab-05-on.png) right top no-repeat;
}

#tab6:hover {
background: transparent url(../css/navigation/tabs/tab-06-on.png) right top no-repeat;
}

#tab7:hover {
background: transparent url(../css/navigation/tabs/tab-07-on.png) right top no-repeat;
}

#tab8 {
background: transparent url(../css/navigation/tabs/tab-08.png) right top no-repeat;
}

So that I can use these tab images as navigation with the mouse (without actually using the images within the html, as they're design elements, rather than content), I've tried to keep them in list form for the appropriate accessibility (although if this isn't appropriate in this situation, please do let me know).

I hope it's something relatively simple.. so can anyone please help me to make these top tabs clickable for navigation?

[happy_hands]

Just noticed I missed a few bits of CSS (in case it makes a difference):

#header {
color: #339993; /* mid tone */
}

/* ---------- Navigation Tabs ---------- */

#tab2 {
background: transparent url(navigation/tabs/tab-02-off.png) right top no-repeat;
}

#tab3 {
background: transparent url(navigation/tabs/tab-03-off.png) right top no-repeat;
}

#tab4 {
background: transparent url(navigation/tabs/tab-04-on.png) right top no-repeat;
}

#tab5 {
background: transparent url(navigation/tabs/tab-05-off.png) right top no-repeat;
}

#tab6 {
background: transparent url(navigation/tabs/tab-06-off.png) right top no-repeat;
}

#tab7 {
background: transparent url(navigation/tabs/tab-07-off.png) right top no-repeat;
}

[Centauri]

I would set up the tabs as an unordered list instead of all the divs, and apply all the sizing, background elements, and hovers to the <a> tags set as block display, then float the <li>s to sit them horizontally. Then move the spans so they only contain the link text, but are inside the <a> elements. At the moment you are hiding the whole <a> link - you just want to hide the text.

Bear in mind also, that many screen readers will not read the text when display is set to none - I prefer the "indent the text off the page" method of hiding the text (spans not needed then).

Cheers
Graeme

[happy_hands]

Cheers Graeme,

I'll give that a go. Thank you.

[happy_hands]

Cheers Graeme,

I've had a good go with the 'Rundle' method (as described in the CSS Zen Garden book, page 134) for the top sectional tabs as described above, to hide the text off the page, but still keep it accessible to screen readers, however, apparently using the method:

#tab01 {text-indent: -5000px}

although this is apparently valid CSS for most browsers, when people are using Explorer 5 (which I've checked my logs, and this is about 1% of my users over the last 6 months), the method also pushes the images off the page, so they're not navigatable

I can't seem to get the 'Levin' method with the various hacks for IE5/Mac, etc. to work with unordered lists and the image replacement.

So can anyone give me a hack so the tabs/UL will still be navigatable for users of IE5?

Or of course if you can suggest a better way, please do let me know.

    <div id="title-tabs">
    	<ul>
        	<li><a href="#" id="tab01">At Your Workplace</a></li>
        	<li><a href="#" id="tab02">At Your Events</a></li>
        	<li><a href="#" id="tab03">Gift Vouchers</a></li>
        	<li><a href="#" id="tab04">Treatments For You</a></li>
        	<li><a href="#" id="tab05">Healthy Living</a></li>
        	<li><a href="#" id="tab06">About The Agency</a></li>
        	<li><a href="#" id="tab09">Secure Login</a></li>
        </ul>
    </div>

/* ---------- Main Navigation Tabs ---------- */

#title-tabs { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000033;
	text-align: center;
} 

#title-tabs ul {
	list-style-type: none;
	text-align: center;
}

#title-tabs ul li {
	display: inline;
}

#tab01, #tab02, #tab03, #tab04, #tab05, #tab06, #tab09 {
	padding: 0; 
	margin: 0;
	float: left;
	height: 35px;
	text-indent: -5000px;
}

#tab01, #tab02, #tab03, #tab04, #tab05, #tab06 {
	width: 105px;
}

#tab09 {
	width: 126px;
}

/* ---------- Main Navigation Tabs - Changeable ---------- */

#tab01 {
	background: transparent url(navigation/tabs/tab-01.png) right top no-repeat;
}

#tab02 {
	background: transparent url(navigation/tabs/tab-02-off.png) right top no-repeat;
}

#tab03 {
	background: transparent url(navigation/tabs/tab-03-off.png) right top no-repeat;
}

#tab04 {
	background: transparent url(navigation/tabs/tab-04-off.png) right top no-repeat;
}

#tab05 {
	background: transparent url(navigation/tabs/tab-05-off.png) right top no-repeat;
}

#tab06 {
	background: transparent url(navigation/tabs/tab-06-off.png) right top no-repeat;
}

#tab09 {
	background: transparent url(navigation/tabs/tab-09-off.png) right top no-repeat;
}