Similar to my replacing h2 with bg image thread a while back, I have a styled unordered list with links that I am trying to add background images to whilst hiding the text.
In ie, it shows the text in the middle of the buttons, and in opera too, but it also shows the text quite big, hence the overlap.
Opera also shows the gaps between the buttons/ links a bit weird..
Is it possible to hide the link text without losing the buttons? and also losing the height of the text as this screws things up in opera, whereas fx sees font-size:0% as "dont show the text".
Same answer I gave in the other thread. Wrap the text in a <span> and use CSS to give that span "position:absolute;visibility:hidden". Your page will look exactly like it does now, without the button text. You shouldn't have any problems with height, and the links will work.
__________________ Unfrozen Caveman Webmaster
One crazy man can block the well, but it takes the whole village to remove the stone. -Iranian proverb
Thanks Eric, text has hidden as you have rightly said, unfortunately, it has hidden the background images in ie6, yet the links are still there.. http://www.sitecreative.net/new/
When using graphics in a css menu, I use a 1x1 pixel transparent gif within the a tags and use the alt for the description.
That works fine for me.
Thanks Gerrit, but I would rather have as close a semantically correct menu as possible, one that when css or images are turned off, the page still functions as it should..
Thanks Gerrit, but I would rather have as close a semantically correct menu as possible, one that when css or images are turned off, the page still functions as it should..
I was afraid you were going to answer something like this,that's why I said "it works fine for me".
Thanks Eric, text has hidden as you have rightly said, unfortunately, it has hidden the background images in ie6, yet the links are still there.. http://www.sitecreative.net/new/
First, I'd suggest re-ordering your CSS. When styling links, the order is LHAV for Link, Hover, Active, Visited. Your stylesheet styles H first, then styles L. Perhaps this is what is confusing IE 6. Then, get rid of that text-indent, with my method you don't need it and this could also be the problem.
Thanks Gerrit, but I would rather have as close a semantically correct menu as possible, one that when css or images are turned off, the page still functions as it should..
Ah, now you say so... To accomplish hiding the text, and making the site work with graphics off, requires a little trickery with z-index. Sorry I don't have a public example to link to, but the gist of it is that instead of wrapping your text in a <span> and setting the background on <a>, put an empty span right after your link text (but still inside the <a> element) and set the background on <span>.
Use CSS to give the span position:absolute. By virtue of being after the link text in the HTML, it will float on top of the link text. By setting the <a> to position:relative you can now set top:0;left:0 on the <span>, it will position at the top-left of the <a>. Don't forget to set width/height and possibly display:block on the <span>.
I'll take a more detailed look later, to make this work without the text showing up when the page is zoomed might be a trick.
Ah, now you say so... To accomplish hiding the text, and making the site work with graphics off, requires a little trickery with z-index. Sorry I don't have a public example to link to, but the gist of it is that instead of wrapping your text in a <span> and setting the background on <a>, put an empty span right after your link text (but still inside the <a> element) and set the background on <span>.
Use CSS to give the span position:absolute. By virtue of being after the link text in the HTML, it will float on top of the link text. By setting the <a> to position:relative you can now set top:0;left:0 on the <span>, it will position at the top-left of the <a>. Don't forget to set width/height and possibly display:block on the <span>.
I'll take a more detailed look later, to make this work without the text showing up when the page is zoomed might be a trick.
Thanks Eric,
I would never have even begun to do it in the method you described, I would never have thought that would have been able to do it, just goes to show where my limits are with CSS then!
I *think* I have done it as you described, would you be able to take a peek at the css and html (copied below).
- The menu items seem to be stacked above each other now, not sure why that is..
I would never have even begun to do it in the method you described, I would never have thought that would have been able to do it, just goes to show where my limits are with CSS then!
Thanks, Tjobbe. Your CSS skills are just fine for any amount of experience as a jobbing developer. As such, it is difficult to find the time to spend a couple hundred hours devising an accessible image replacement technique over the course of a year, which is what it took me. I know, because I didn't have time for that sort of thing during the six years I spent knocking off projects for a living.
Nowadays, I consider what I do as being a CSS research developer, as opposed to a production developer. There is a limit to how much you can pick up through experience, because some of the concepts in HTML and CSS are really esoteric and counter-intuitive. My best advice for someone at Tjobbe's level is to take a six-month sabbatical away from production work and devote your time to intensive learning without the pressures of scheduling or interacting with clients to give yourself some time to re-learn the technology from a perspective of having plenty of production experience. I didn't say it was easy advice...
So if I spend some time re-coding a site or two on IWDN without being asked, please don't take it as criticism of skills. Since I only have one or two designs of my own to work on, and am not a designer to begin with, I must resort to "optimizing" the work of others to keep a fresh perspective and also to keep honing my own skills. You can use as much or as little of my example as you want, provided that you understand the parts you use.
I cower before the_pm's turnaround time, though! What I'm saying is, I'm giving your page a workover which will include the menu, instead of singling out your menu or just saying "set a width on the <li>'s" (which might fix it, but shouldn't be necessary).
You don't escape a wrist-slap, though -- where are the width and height attributes on your <img> elements? You're forcing a two-pass rendering of your page, might as well be using tables for layout...
ul#navbar{
width:640px;height:32px;
margin:0 auto;
background:#323029
}
ul#navbar li{
float:left;
height:32px;
display:block;
text-align:center
}
ul#navbar li a{
position:relative;
height:32px;
display:block
}
ul#navbar li a span{
position:absolute;
top:0;left:0;
display:block;
height:32px
}
li#homeButton,li#homeButton a span{width:72px}
li#homeButton a span{background:url(./images/home.png) no-repeat center center}
li#webButton,li#webButton a span{width:130px}
li#webButton a span{background:url(./images/webdesign.png) no-repeat center center}
li#seoButton,li#seoButton a span{width:73px}
li#seoButton a span{background:url(./images/seo.png) no-repeat center center}
li#contactButton,li#contactButton a span{width:93px}
li#contactButton a span{background:url(./images/contact.png) no-repeat center center}
ul#navbar li a:hover span{background-position:center top}
ul#navbar li a:active span{background-position:center bottom}
I combined your separate button-state images into a single image for each button, this accomplishes a pre-load of the hover state. Your code would wait until the button is hovered the first time, before fetching that image from the server, resulting in a delay due to network activity the first time someone uses your site menu. Now a hover just slides the background, moving the existing image around instead of replacing it with another image.
I'm not sure what you're after with the menu buttons, currently left-justified, but they could be centered or evenly spaced. None of this is tested.
This is the 2nd time recently I've noticed that technique with the background image on the buttons. Is there some benefit to that? I hadn't seen it until a couple of weeks ago.
In web development, we come up against some pretty strict limitations on fonts. We also like to make pretty hover effects for our menus. The problem is, once we've replaced an <h> tag with an image of text or implemented a rollover effect designed for visual rendering on a desktop browser for the sighted, we have most likely hidden that text from everyone else -- cellphones, screenreaders, search bots...
The simple solution is to use markup along the lines of <h><img></h> to replace a textual heading with an image. The text of the link goes in the alt attribute of the <img>, so theoretically if the image doesn't load or if the user-agent is a screenreader the alt attribute's content will be seen or heard. But this brings up problems of its own.
If the heading in question is <h1>, then you are telling googlebot that the single most important concept on the page is an image. The alt attribute may be relevant to search algorithms, but are given nowhere near the same weighting as any level of <h>. Assistive technologies are consistent in their handling of textual headings, but they are all over the place when it comes to <h><img></h>, which annoys users who depend upon your headings as their means of navigating your information space.
So the "semantic markup" solution here is to use <h>text</h> because nobody is incompatible with it. It just isn't pretty for the vast majority of site visitors. This is where CSS comes in quite handy -- we can easily set a background image on the <h> tag itself and hide the text, i.e. text-align:-9999em or by using <h><span>text</span></h> and setting the span to position:absolute; visibility:hidden. Problem solved, right?
Not so fast. What about users, and I fall into this category from time to time myself, who browse the web with images off? Or what about users, and I may fall into this category as my eyesight deteriorates from waaaaay too much time spent in front of dual 20" LCDs, who rely on screen magnification technology? Try using Opera's zoom feature on your replacement images and see how quickly they become unreadable:
This is why I say most "accessible image replacement" techniques aren't really accessible. If you've hidden the text for your menu links and someone visits with images off, just exactly how do you expect them to be able to navigate your site? Ah! That's what I set to solve with the technique in this thread, which takes advantage of z-indexing without actually using the z-index CSS rule, just position:absolute.
With my method, the empty <span> inside the link gets the background image, then it's set to the same size as its parent link and positioned directly on top of it. You're clicking on the <span>, not the link, even if the image fails to load -- this method "degrades gracefully" because it falls back to being transparent. If you have the Web Developer Extension for Firefox or the AIS Web Accessibility Toolbar you can rummage around until you've found an option to disable images, then test your site. I like to turn off images, then zoom about 6x to 8x to check my text positioning, so my layouts can work with magnifiers.
I have a couple more uninvited suggestions for Tjobbe... first, the current / recent work sections work better for me as lists:
Code:
<h3>Recent Projects</h3>
<p>Some of the recently completed works include:</p>
<ul id="showcase">
<li><img src="./images/businessThumb.jpg" alt="Example of business themed template design" width='155' height='119'/></li>
<li><img src="./images/gardenThumb.jpg" alt="Garden Designs - a landscape company website" width='155' height='119'/></li>
</ul>
<h3>Currently working on...</h3>
<ul>
<li>A <strong>brand new Web site</strong> for a freight company in Berkshire and a Kitchen installations firm in Banbury</li>
<li>A <strong>re-design of an existing Web site</strong> for a new landscape gardening company in Banbury, Oxfordshire</li>
<li><strong>Preparing to launch siteCreative</strong> to the masses by means of press releases and adverts in the local press</li>
</ul>
<p>There might even be an interview or two very soon, watch this space...</p>
I've made some preliminary changes to the <form> code to make it more accessible, the <textarea> may be a bit much, I'm also trying to figure out if it's possible to hide the default values for the form fields while leaving them in the code (because that's been bugging me a bit) for accessibility.
The name and id attributes were a little tough to follow and were using reserved words. I was playing around with using <table>s and <dl>s inside of <form> markup a while ago myself, but no matter how I sliced it really the best way is to just use a raw <form>, I think.
The real bitch is <fieldset>, browsers are really inconsistent with it. I use display:none to get rid of it. Normally, display:none makes an element inaccessible, but <fieldset> is a special case -- you can use display:none without changing the structure of your markup, <fieldset>'s purpose is to accessibly structure your markup.
Web browsers treat it visually by drawing a box, but the problem with this box is that it isn't really a box -- not in CSS terms, anyway. If you want the box drawn, great, but don't expect to be able to style it, or position it, or pad it, or change its color, or etc. etc. etc. So if you don't want it, just get rid of it with a display:none and don't worry about assistive technologies getting tripped up.
Unfrozen Caveman Webmaster
