I recently finished my new company website. However, to get the site done and launched, I cut corners on backwards compatibility and browser friendliness. I need a CSS guru / ninja to basically go back through my site and make sure that screenreaders, people using IE6, and other less popular browsers can properly view and see my website. For example, I want text with "My Company Name" to display in place of my logo when someone has images and CSS disabled in their browser. I know there are a few methods for getting this done, but I have no clue how to implement. I also want someone to go through the few images on my site and make sure they have some descriptive text in place when someone has CSS / images disabled. The catch here is, I want the person to be from the United States. I also would like some instruction on how to do this myself so that the next website I develop I don't have to hire someone like I am now. If you think you can help me, please let me know and I will provide details. I will ask to see SOMETHING you have done already that utilizes these features. Be prepared with a quote upon viewing the work. I am looking to get this done before the end of the weekend, if possible.
No, I am referring to something beyond simple ALT tags. I want H1 - H3 headers to stay intact. Some of the images took the place of a header, and therefore, I want the H text to be hidden, but visible by screen readers and people who choose to disable CSS and Images.
ohhhh then just do <h1 class="logo">your company</h1> .logo { text-indent:-9999px; background:url('yourcompanylogo.png'); width:LOGOWIDTHpx; height:LOGOHEIGHTpx; } if you need anymore help just add me on msn,
Well, for starters, I don't have time to do it anymore. I am busy now, which is why I am posting in the services category on this forum. Also, there is more than one way, and I don't think the way you are referring to is the most compatible way of doing things when compared to the other methods.
dr00t, the method that 1368633 gave you was the most compatible and semantic way to do things, although 1368633's way lacks bulletproof and professional CSS. Here is how I would do it, assuming your logo image is a link, like most site logos are. My method also includes adding a hover state image. <h1 id="logo"><a href="#">Your Site Title</a></h1> Code (markup): h1#logo{ margin: 0; padding: 0; } h1#logo a, h1#logo a:visited{ text-indent: -7777px; display: block; width: 100px; height: 50px; border: 0; background: url(img/logo.gif) no-repeat top left; } h1#logo a:hover{ background: url(img/logo-hover.gif) no-repeat top left; } Code (markup): I code all my sites to the standards in which you are looking for, dr00t, but I am not from the USA. I am from Canada. If you still want to hire me, just send me a PM.
Jesus, you are all wrong - not even 1% correct to what the OP is requesting! There is a better way, and you're right that's not it. The OP knows more than the people trying to get the job First of all, the logo shouldn't be a H1. It's an abuse of the heading tag, and it's bad for SEO. Secondly, you position the text OFF the page. So if someone has images disabled, all they see is a big empty box. Your method isn't any better, all you are doing is putting the image on the a instead of the H1. Again, the text is positioned off the page. And you use more CSS. It's certainly not anymore "bulletproof" and certainly not anymore "professional". IE6 is not a "less popular" browser - it's one of the major browsers. What he means everyone is he wants image replacement so that if images are disabled, styled text will show instead. If CSS is also disabled, they will still get a decent effect (people not using CSS would more likely than not be on a handheld device) The method you are after is known as the "Gilder/Levin Method", which you can find here: http://www.mezzoblue.com/tests/revised-image-replacement/ Solution: If there is text in the image, put that text in the alt - otherwise, put nothing (don't listen to whoever said put an alt for everything). If you have a decorative ribbon for instance, putting "decorative ribbon" if the image doesn't display is just stupid because then "decorate ribbon" will randomly be written on the page for those without images (or even while the page is laoading) - it doesn't add any meaning (which is what alt tags are for) There are two solutions for you, on the house
Your trying to act all professional and smart. You obviously don't know anything. h1 is bad for SEO.. lmfao? Also the link to the solution you posted has the same amount of CSS I used in the example. And what makes you think my solution isn't "bulletproof" and not "professional", there are dozens of top sites that use that same exact method.
First time I've seen an argument between members spring up from a thread work request Congratulations, you've probably found 3 talented coders.
Yeah, I just want to say... I think you're all great! Believe me, I didn't mean for this to turn into some kind of argument. 1368633: I appreciate all of your help, I don't want you to think I am not grateful. I was just creatively trying to build on what you had said by posing questions and offering other thoughts. It's just my way of doing things... sorry. Also, I am fully aware that this is one of those things where there are multiple methods to get the same result. Each method is known to have it's "pros" and "cons". You are both right in your own separate ways. VTTE: Thanks.
I don't huh? Having the logo as a H1 is bad. Why put "Bob's Store" in the H1 when the site will rank #1 for "bob's store" anyway? Not only is it a waste, it's unsemantic. The H1 is to be used for the main heading of the page -- and the main heading of every page is most certainly not "Bob's Store". It's not about the amount of CSS. Heck, the example I pointed to even has a <span></span>. However, given the way HTML+CSS works, that is something that just has to be done in order to achieve an accessible solution. Pfft. So I should do my HTML like Google does because they make billions? Just because others do it means nothing as to whether it's right or wrong. For the exact reasons I said: - The logo shouldn't be a H1 - The text is off the page. Hidden text is a no-no, even if it's "legit" - If images are disabled, nothing shows up but a big empty box Let's say you have a menu using your awesome image replacement technique. All is well and dandy. Someone has images disabled - great, they have no menu because images aren't displaying and the text isn't displayed as its -9999px off the page. The website is now unusable. That's not bulletproof. And hey, not saying that you're the only one that uses it, I even used to use it as it was the first method I learnt when learning image replacement. Just don't be naive and ignorant like so many others who cling to their methods no matter how much proof there is that it's complete and utter trash (automated imageready HTML anyone?). There is always something that can be improved. That method definitely isn't the best way of getting the job done.
Just to clear up any confusion for anyone.... http://css-tricks.com/nine-techniques-for-css-image-replacement/