Need alternative way of showing logo that validates

**Drakim** · 11-29-2008 06:28 PM

Clever as I was, I thought I had come up with the ultimate way of displaying the logo on my web page.

<h1><img src="mylogo" alt="mylogo" \></h1>

What's so special about this?

Well, if the browser has images enabled, it's nothing but a regular logo image.

However, if they have images disabled (which is becoming more and more popular with small devices with browsers), then the alt text of the image will be shown instead. Due to that I've wrapped the image in <h1> tags, this alt text will be affected by them. I've styled the <h1> tag so that the alt text looks almost like my original image logo, the same font, same size, etc. This means that even browsers where images are disabled will see the same logo, although in text form, slightly more fuzzy.

Next, if the browser even has CSS disabled, or my CSS style file is somehow blocked, then the alt text will be formated according to the standard setup for the <h1> tag. Although this isn't that close to my original logo, it's still pretty clear that this is the main logo on the page, and not just some text at the top.

I was so happy with this solution, thinking I had thought of everything, without having to resort to JavaScript, until I tried to get it validated. I got this error:

document type does not allow element "h1" here; missing one of "object", "ins", "del", "map", "button" start-tag.

So, I ask you, is there a way to get all the features I mentioned, and still validate?

**aj_nsc** · 11-29-2008 07:22 PM

First of all, this has nothing to do with your image tag, it has to do with your surrounding code, or perhaps what I have to say in point number two:

Secondly, it's supposed to be a forward slash that closes the tag, not a backslash

Code:

<h1><img src="mylogo" alt="mylogo" /></h1>

I am assuming that you have height and width attributes in your real page on your logo image, because if you don't then they would also cause your page to fail validation.

I think if you fix the closing tag (i.e. using a forward slash instead of a backslash) it might solve your error.

**Drakim** · 11-29-2008 07:46 PM

ah, sorry, I rewrote the html in haste. The page tried to validate does have the right slash. It's only wrong here on the forum.

Ah, you are right, when I read the error message again, I realize that it does indeed complain about what's around the <h1> tag, not the img tag.

I have this:

HTML Code:

<div class="main">
<a href="http://drakim.net/"><h1><img src="http://drakim.net/image/logo.png" alt="Drakim.net" /></h1></a>
</div>

I guess the problem is that I have a H1 within a link?

**Charles** · 11-29-2008 08:07 PM

Inline elements, like the A element, cannot contain block level element, like H1.

For another, perhaps more powerful, way to accomplish the same thing see http://www.csszengarden.com/ .

**Drakim** · 11-29-2008 08:11 PM

Uhm, but the logo in that site, it isn't clickable. It's not doing the same thing as me, so I don't see what I can draw upon to accomplish the same ting.

**Major Payne** · 11-29-2008 11:43 PM

You wouldn't likethe following????

Code:

<div class="main">
<h1><a href="http://drakim.net/"><img src="http://drakim.net/image/logo.png" alt="Drakim.net" /></a></h1>
</div>

Image is a link in this code.

**Drakim** · 11-30-2008 06:05 AM

Aha! That validated, and worked! Thank you!

**Charles** · 11-30-2008 06:07 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
h1 a span {display:none}
h1 a {background:url(http://drakim.net/image/logo.png); display:block; height:36px; width:207px}
</style>
<h1><a href="http://drakim.net/"><span>Drakim.net</span></a></h1>

That'll allow you to do things like:

Code:

<h1><a href="http://drakim.net/"><span><em>Drakim</em>.net</span></a></h1>

I've pretty much stopped using the IMG element.

**Major Payne** · 11-30-2008 04:26 PM

Not sure if you were referring to my example, but you're very welcome.

Thread: Need alternative way of showing logo that validates

Thread Tools

Display

Hybrid View

Need alternative way of showing logo that validates

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions