10 replies [Last post]
seb
Offline
Enthusiast
Last seen: 13 years 2 days ago
Joined: 2003-09-20
Posts: 208
Points: 0

Is it OK to wrap an A tag around a DIV. The DIV will have a mixture of content, H1, P, IMG, etc.

That allowed?

seb
Offline
Enthusiast
Last seen: 13 years 2 days ago
Joined: 2003-09-20
Posts: 208
Points: 0

<a><div>blah</div></a> OK?

The only thing of note that I can find in the HTML4 spec is that you mustn't nest A-tags, which I'm not planning on doing.

I have however noticed that in IE if I put an image inside the div then the area covered by the image is no longer clickable. Adding an "onclick" to the div cures this, and the problem doesn't exist in FireFox.

<a href="newsview.asp?n=14" title="Click to view the full story">
	<div onclick="document.location.href='newsview.asp?n=14';" class="newsItem" id="news1">

							
		<h2>blahdy blah blah blahdy blah blah blahdy blah blah</h2>
								
								
		<img src="/public/site/newsdocs/14.jpg" alt="Nailing the drop..." width="80" height="120" />
							
						
		<p>yada yada yada yada yada yada yada </p>
					
								
							
	</div>
</a>

seb
Offline
Enthusiast
Last seen: 13 years 2 days ago
Joined: 2003-09-20
Posts: 208
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

triple post...

seb
Offline
Enthusiast
Last seen: 13 years 2 days ago
Joined: 2003-09-20
Posts: 208
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

triple post...

mkjoker
Offline
Regular
Dresden
Last seen: 15 years 21 weeks ago
Dresden
Timezone: GMT+1
Joined: 2004-09-01
Posts: 40
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

<a> is an inline element, while <div> is a block level element.

On this the HTML4.01 documentation http://www.w3.org/TR/html4/struct/global.html#didx-block-level says:

Quote:
Content model
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

seb
Offline
Enthusiast
Last seen: 13 years 2 days ago
Joined: 2003-09-20
Posts: 208
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

Then again though, in this crazy world of CSS if I set the A-tag to be a block element...

stickmus
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2004-07-08
Posts: 17
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

It's more about semantics and structure though.

Use a span and make it display:block;

Otherwise you'll run in to validation problems somewhere down the line

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 11 years 43 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

Couldn't you just do it the other way?

<div class="blah">
<a href="blah">
A bunch of text

and images

etc.
</a>
</div>

Or am i missing a point here? :?

I am Dan, Dan I am.

seb
Offline
Enthusiast
Last seen: 13 years 2 days ago
Joined: 2003-09-20
Posts: 208
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

Fruitcake wrote:
Couldn't you just do it the other way?

....

Or am i missing a point here? :?

I want to make the whole block clickable. That would only make the text inside the block clickable.

Shoving it all into a button element has occurred to me, but I don't really want it to move when clicked upon.

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 11 years 43 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

Ah gotcha.

Apologies.

I am Dan, Dan I am.

seb
Offline
Enthusiast
Last seen: 13 years 2 days ago
Joined: 2003-09-20
Posts: 208
Points: 0

&lt;a&gt;&lt;div&gt;blah&lt;/div&gt;&lt;/a&gt; OK?

It seems to have some odd by effects so I'm goign to elect to but the <a> around everything inside the div, and then additionally attach an onclick event to the div.