@felgallFeb 29.2008 — #Well you have nothing there for people to click on. You need something visible for people to be able to find the link to click on it. Any whitespace in HTML is treated as either nothing at all or a single space depending on where it is and which browser is being used.
@CentauriFeb 29.2008 — #Whilst that does work, it is a little biased against those who may use assistive technologies. I would at least put text in the link and use one of the image replacement techniques to hide the text visually.
@toicontienFeb 29.2008 — #While working on some templates made for the Joomla content management system, I saw they had created a 1x1 transparent PNG and used that as the logo. You can apply a background image to the transparent image, then apply the correct dimensions to the IMG tag using CSS. In that way you leverage the accessibility of IMG alt text and combine it with the flexibility of CSS. I thought it was pretty brilliant. ?
@felgallFeb 29.2008 — #If there is meaningful alternative text for the logo then shouldn't the logo go in the HTML rather than be applied via the stylesheet? There is a possibility for people to have CSS disabled and end up with the transparent image showing without the background so that they don't see the logo or the alt text.
@toicontienMar 01.2008 — #Put the web site logo text in an H1 tag and hide it using CSS. Easy solution. On top of that, nobody realistically will have CSS disabled. For disability purposes I can see them specifying their own CSS, but not disabling it. Simply putting the logo text as plain text and then hiding it via CSS is sufficient. In my opinion, you don't even need to do that.
@felgallMar 01.2008 — #Those using a text only web browser probably do not have an option to enable CSS. The copy of Lynx that I test my pages in doesn't pay any attention to the CSS, I doubt that a more recent version would either.
Additionally a percentage of people will have their own CSS defined in their browser to be used for all pages in place of or in addition to any supplied with the page.
I need alternate text also and i think logo with HTML tag will be fine then CSS. as i can't use alt for DIV. one more issue is I want to fix it using rules not with TRICKS.
@toicontienMar 03.2008 — #The transparent PNG is embedded on the page as an IMG tag. You apply a background image to the IMG tag. You can put the alt text in the transparent PNG IMG tag. [code=html]<h1 id="logo"><img src="/imagesblank.png" alt="Big Company, Inc."></h1>[/code] #logo img { background: transparent url(/images/logo.png) no-repeat scroll 0 0; height: 92px; vertical-align: bottom; width: 300px; } You could use a transparent GIF too. You can also use a JPG, GIF or PNG background image. It's your choice.
Using the code I posted above, Lynx will simply show the alt text.
@felgallMar 03.2008 — #Consider what your visitor will see if their browser doesn't support stylesheets but does support images (eg. Netscape 4). You need something in the link for those people as well as those who have both or neither.
@toicontienMar 03.2008 — #Consider what your visitor will see if their browser doesn't support stylesheets but does support images (eg. Netscape 4). You need something in the link for those people as well as those who have both or neither.[/QUOTE] Netscape 4 is so far old and outdated I'm not going to support it unless there is a large enough population using it. This is just my opinion. As for other browsers that don't support style sheets? Well. That's unfortunate and you need a newer browser. The Lynx browser, which doesn't support images, will display the alt text in the IMG tag, so nothing is lost there.
If you disable images in your browser, again you will see the alt text of the IMG tag.
I can't see a single reason to disable style sheets. As I mentioned in one of my previous posts, those who disable style sheets for accessibility reasons instead need their own style sheet. Lastly, it would be a good idea to put the logo text in the <h1> tag, and then hide that text with CSS. That way if you do happen to disable CSS you see plain text. Amended code is below: [code=html]<h1 id="logo"> <img src="/imagesblank.png" alt="Big Company, Inc."> <span>Big Company, Inc.</span> </h1>[/code] [CODE]#logo img { background: transparent url(/images/logo.png) no-repeat scroll 0 0; height: 92px; vertical-align: bottom; width: 300px; }
@toicontienMar 03.2008 — #lohumihem actually brings up a great topic to discuss. How do you balance accessibility with flexibility when placing the logo on the page?
Various text and image replacement methods have been used for CSS that have varying levels of accessibility and flexibility. I like the idea I posted above, having both the plain text and image. The plain text could be used also for the print version of the site. I also used to use a combination of positioned SPAN tags, plain text and background images. What does everyone else think? What do you use to place logos on a page, and why do you like using that method?
@felgallMar 04.2008 — #I should have mentioned printing as well regarding having something to display in that spot. Your latest version handles the situation where you don't want the logo to be treated as part of the page content but where you want something to appear there when the logo doesn't.
I would consider the logo to be content and would include it directly in the HTML but for those who don't want it in the page and who want to substitute text where the logo isn't displayed your latest version would be a reasonable alternative.