Googe doesn’t like hidden text when it is being used to trick the search engines. When you’re using it to replace text with an image that represents the same content then that is absolutely fine.

The thing to think about is how will users who view your web page with images and css switched off view your page? If the same functionality and content is still available (albeit without the design elements) then you can assume that Google will be fine with your page.

Hope that helps.

http://www.google.com/support/webmasters/bin/answer.py?answer=66353

But in our case, it seems essential to use a technique like ones explained here in order to be accessible for search engines, the disabled and others.

I wonder how Google (and others) handle this situation?

How about using this method for some nav, where does the anchor fit in?

I almost got it working but the span is sitting in front of the anchor so the hover only works (or is visible) when you turn off the span bg image? Should the span not be behind?

{div id=”header”}{h1}{span}{/span}{acronym title=”Hello Dave”}HD{/acronym} – Please Help!{/h1}{/div}

As for the #header style. It depends what you want to do with it. If it’s not doing anything then you could get rid of it and I’d also get rid of the div itself if you can style everything through just the h1 tag.

I only introduce div’s to wrap around content if they’re required to achieve the layout so if it isn’t actually doing anything then I’d remove it and just style the h1 directly as you should only have a single h1 per page anyway.

i think it’s starting to come together, although the h1 text still shows up over the pic when i change the h1 color to gray (since my container’s background color is black).

one question i have is: in the new css you gave me, there’s no css for #header alone. do i keep what i have for #header{} or just remove it?

anyway, i don’t mean to turn your kick-ass blog into the “help Jonathan” show (unless you think this could help others)

You’d need to use the following CSS

#header h1, #header h1 span {
width: 256px;
height: 41px;
background-image: url(image.gif);
font-size: 100%;
}
#header h1 span {
display: block;
position: relative;
z-index: 1;
margin-bottom: -41px;
}
#header h1 { overflow: hidden; }

And using your example of HTML you’d also need to introduce an empty span

{div id=”header”}{span}{/span}{h1}{acronym title=”Hello Dave”}HD{/acronym} – Please Help!{/h1}{/div}

Hope that makes sense?

sorry, i tried to paste the html code, and it actually turned it into html lol…

using “{}” instead of “” the html looks like this

{div id=”header”}{h1}{acronym title=”Hello Dave”}HD{/acronym} – Please Help!{/h1}{/div}

sorry for the newbie-ish question (i actually am a newbie so its fitting), but how would this change if the top banner and h1 are inside a “#header” div? would i put the and background image inside the header but outside the h1? for some reason i’m struggling to translate it.

right now i have something like this:

HD – Please help!

div#header {
height:238px;
background-color:0;
border-style:dotted;
border-color:#000000;
border-width:0px 0px 3px 0px;
background-image:url(headerPic.png);
background-position: bottom;
background-repeat:no-repeat;
}
div#header h1 {
height:80px;
line-height:80px;
margin:0;
padding-left:10px;
color:black;}