<a href> around a <div>

[Tym99]

The site I'm currently working on, I'm trying to design in such a way that all the changes I would need to make can be done in the external style sheet and I won't have to edit any of the html pages.

At the bottom of each page is a little signature image which links back to my personal homepage. So I have the following div:

<a href"#"><div class="tymSig">&nbsp;</div></a>

which is declared in the stylesheet as:

.tymSig {height:55px;width:66px;cursor:pointer;background:url('./images/tymSig.png');position:relative;z-index:2}

In IE this works fine. However, in Netscape and Firefox, the active link area takes up the entire width of the page. After much trial and error I was able to get it working by changing the div to a span and putting a 1x1 transparent gif inside and streching it to the size of the image, since height and width don't appear to work with spans outside of IE.

Although this works, my problem is that if I ever change the signature image I'd have to go back and edit the size of the transparent gif inside the span on every page instead of just a quick change in the stylesheet.

Can anyone give me some suggestions?

[mcibor]

This won't validate.

The <div> tags aren't allowed inside <a> tags. You should write:

<div class="tymSig"><a href"#">&nbsp;</a></div>

I don't know if it will help, but at least will be valid.

Best regards
Michal Cibor

[PCInk]

<div> is a block element and <a> is inline. This means <a> must be inside a <div> if both are present.

<span> is an inline element and you may change the div's to span's and find it works ok.

[g1smd]

Once you start having tons of nested div and span tags you can soon lose sight of the document structure and the code starts to bloat up too.

I try to reduce the whole document to headings, paragraphs, lists, tables, and forms; so the semantic structure is correct. I apply the styling to those blocks.

Occasionally, and it is very occasionally there may be a need to put a div around several blocks, or include a span; but I find this to be very rare.

In many cases there is a way to style the blocks you already have. In the example above I would enclose the link in <p> ... </p> tags, and add the class to the <p> tag. No need for a div at all.

[chadmg]

Hi Tym99, welcome to webmasterworld.

Why don't you just put the image there instead of the div. When you change the image, just give it the same name, and leave out the width and height attributes. You'll only have to worry about people who have the image cached.

[Tym99]

I had thought of just adding the image. The thing is I want the flexiblity for the site to basically be skinable. So I'm trying to shy away from putting in images and inline styles as much as possible.

I tried the P tag... but my problem was the same as when I tried to use the span. Declaring height and width so you could be the image does nothing in Netscape and Firefox. I was able to put a 1x1 transparent gif inside the link tags and strech it to be the desired size.