[longisland6]

i usually make my site logo (in the top, upper left) a hyperlink to the home page of the site. i'm now starting to place all my images as css background images to truly separate content and presentation. is there a way to assign a hyperlink to the css background image so it validates as xhtml strict (with the correct mime type)? thank you.

[funkyprem]

put in the a
display: block
height and width
position absolute if you need to but float left is preferable
and you're done.

bear in mind your logo won't print if you do it the way that you're doing this.

[longisland6]

are you saying "put in the a"...href?

[funkyprem]

put the anchor inside the div that the background image is attached to yes

[microdesign]

cool didnt know this was posible.

[pgo]

I usually put the logo in the markup (unless I'm using some kind of image replacement technique). That way I can include it in the print stylesheet.

There's nothing wrong with putting images in markup if they're content. Now, you could argue both ways with a logo - it's essential branding, the identity of your company. Does that make it content? Maybe.

Also, float: left; (if you use it) will automatically set it to display: block. No need for both.

If I use image replacement for the logo (i.e. if it's a logotype and not a graphic), I'll usually do something like this:

<a id="logo" href="/"><span>Logo Text</span></a>

Then...

#logo {
  display: block; /* Or float left, whichever is necessary... */
  width: SOMEpx;
  height: SOMEpx;
  background-image: url(/path/to/image.gif);
}

#logo span {  /* Hide the "Logo Text" from view... */
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

Pro: Better for SEO than an alt attribute, I believe, and perfectly accessible.
Con: Difficult to make it print.

Otherwise, it's just:

<a href="/"><img src="/path/to/image.gif" alt="Logo Text" /></a>

Pro: Will print by default (most printers won't print background images).
Con: SEO and graphics in markup (not that that's always a bad thing).

[b v]

Originally Posted by pgo

Also, float: left; (if you use it) will automatically set it to display: block.

you mean inline?

[pgo]

When you float something it becomes a block element.

[b v]

Originally Posted by pgo

When you float something it becomes a block element.

block elements are on their own line though.

ex: Block and floated boxes

modified htmldog example

[pgo]

Yes, of course. They're still converted to block elements even though they don't appear the same way since they're taken out of the normal document flow.

[b v]

what makes it a block element then?

[pgo]

What makes a <p> a block?

Floatutorial: Float basics

When you float an element it becomes a block box.

...

A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.

It's a "floating" block.

[R1gM]

I always use the text indent function personally.

Like others have said do display block and set the width and height. If for example you use <li> elements with links for navigation as is the norm then it works well. Once you use the display block and set width height and background then add in text-indent: -9999px; and you are all set.

This way there is no need to introduce a span into your coding.

<a href="gosomewhere" id="test">Testing</a>

a#test{
display:block;
width:100px;
height: 50px;
background: url(your background) no-repeat;
text-indent: -9999px;
}

Of course if you want to get super special look at naviagtional matrix technique for menus as this way you create a one block navigational image and use css to create the rollovers and different buttons from this one image (the image holds all your states on one piece which is often a shorter load than loading all individual images separately).

And usually you use the link inside a div or <li> element so I usually give that element the id then use the css selector to select the tags within that element rather than actually assign the id to the tag.

[Joneorange]

Originally Posted by pgo

Pro: Will print by default (most printers won't print background images).
Con: SEO and graphics in markup (not that that's always a bad thing).

I have never tried this but… You could combine both:

<a id="logo" href="/"><span>Logo Text</span> <span id="pint_logo" ><img src="logo-bw.gif" alt="Logo Text" /></a>

Screen stylesheet

#pint_logo { display: none; }

Print stylesheet

#logo span {  /* Hide the "Logo Text" from view... */
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

I usually just hide my span I like way you have done it.