XHTML Validation fails with nested block elements.

[seajays]

I've got my page working just as I wanted it - but when I came to
validate the XHTML, using W3c's validator it failed. Essentially as
far as I can see it the problem is this:

1: <div>
2: <a href="somelink. htm">
3: <div>
4: <h2>Title</h2>
5: Some text
6: </div>
7: </a>
8: </div>

At line 3, it fails because it says a block level tag (I assume the
<div>) is nexted in an inline tag (which I assume is the <a> tag).

In the stylesheet I have the a tag set as display:block;

So my question is, if the <a> tag is set to be 'block' by the CSS, does
this technically mean that the XHTML is valid, as the <a> tag is no
longer inline in this context?

[Martin Honnen]

se*****@hotmail .com wrote:

but when I came to
validate the XHTML, using W3c's validator it failed. 1: <div>
2: <a href="somelink. htm">
3: <div>
4: <h2>Title</h2>
5: Some text
6: </div>
7: </a>
8: </div>

At line 3, it fails because it says a block level tag (I assume the
<div>) is nexted in an inline tag (which I assume is the <a> tag).
Yes,.
In the stylesheet I have the a tag set as display:block;

So my question is, if the <a> tag is set to be 'block' by the CSS, does
this technically mean that the XHTML is valid, as the <a> tag is no
longer inline in this context?

No, a stylesheet doesn't matter, the DTD clearly says which elements are
allowed inside of an <a> element and against the DTD the XHTML is not
valid, whatever stylesheet you use.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Spartanicus]

se*****@hotmail .com wrote:

I've got my page working just as I wanted it - but when I came to
validate the XHTML, using W3c's validator it failed. Essentially as
far as I can see it the problem is this:

1: <div>
2: <a href="somelink. htm">
3: <div>
4: <h2>Title</h2>
5: Some text
6: </div>
7: </a>
8: </div>

At line 3, it fails because it says a block level tag (I assume the
<div>) is nexted in an inline tag (which I assume is the <a> tag).

In the stylesheet I have the a tag set as display:block;

So my question is, if the <a> tag is set to be 'block' by the CSS, does
this technically mean that the XHTML is valid, as the <a> tag is no
longer inline in this context?

No. There is only one flavour of valid. Provide an url to the page if
you want suggestions on how to change it.

--
Spartanicus

[Steve Pugh]

se*****@hotmail .com wrote:

I've got my page working just as I wanted it - but when I came to
validate the XHTML, using W3c's validator it failed. Essentially as
far as I can see it the problem is this:

1: <div>
2: <a href="somelink. htm">
3: <div>
4: <h2>Title</h2>
5: Some text
6: </div>
7: </a>
8: </div>

At line 3, it fails because it says a block level tag (I assume the
<div>) is nexted in an inline tag (which I assume is the <a> tag).
Yes. (once we correct tag -> element)
In the stylesheet I have the a tag set as display:block;
So what? That's just how the <a> element is displayed not what it is.
So my question is, if the <a> tag is set to be 'block' by the CSS, does
this technically mean that the XHTML is valid, as the <a> tag is no
longer inline in this context?

No. <a> is always an inline element in (x)html regardless of how it is
displayed.

Steve

[seajays]

Thanks - the thing is not live on the internet yet, however I have
constructed a 'test' page which demonstrates the same effect:

http://www.seajays.org.uk/test_xhtml.htm

The rollover effect of the box turning grey is what I want - and it
*looks* fine onscreen. It's just that because I had to use <div> to
push each containing box down so that it would carry on past the image,
the whole lot ends up inside the anchor tag, and that won't validate.
Any suggestions gratefully received.

Cheers,
Colin.

[Spartanicus]

"se*****@hotmai l.com" <se*****@hotmai l.com> wrote:

Thanks
Please quote a bit of what it is you are replying to, snip it down to
the minimum, and put your reply beneath it.
- the thing is not live on the internet yet, however I have
constructed a 'test' page which demonstrates the same effect:

http://www.seajays.org.uk/test_xhtml.htm

I'd would position the images to the left on the same line as the header
text, and I'd omit hyper linking the text beneath the header. If you do
that then the change is simple, just insert the image in the header and
place the hyper link around the image and header text.

You can keep the existing method, but it would require at least 2 links
pointing at the same page, this is not good UI design.

A compromise is to omit the text beneath the header linking, but keep
the image above the header, you can do that by including the image in
the header and follow it with a <br>.

--
Spartanicus

[seajays]

Spartanicus wrote:

"se*****@hotmai l.com" <se*****@hotmai l.com> wrote:

Thanks
Please quote a bit of what it is you are replying to, snip it down to
the minimum, and put your reply beneath it.

Yeah Sorry - not yet used to the new Google Groups interface...

- the thing is not live on the internet yet, however I have
constructed a 'test' page which demonstrates the same effect:

http://www.seajays.org.uk/test_xhtml.htm

I'd would position the images to the left on the same line as the

header text, and I'd omit hyper linking the text beneath the header. If you do that then the change is simple, just insert the image in the header and place the hyper link around the image and header text.

OK thanks,

Have tried this (see http://www.seajays.org.uk/test_xhtml2.htm ) - and
the page now validates.

Unfortunately it no longer produces the effect that I wanted. The
'grey' highlight when you hover over is no longer in the entire box,
just over the title. :(

Also on a high resolution screen, if the browser is maximised, the
image starts to poke out of the bottom of the grey box. I had found a
solution to this in the 'expander' div, however we're then back to the
problem of including the div in the anchor element. Is there a way to
ensure that the containing boxes will be the right size to hold the
image, even though the image is floated left?

Another issue is, if the window is resized smaller, the text starts to
wrap around the bottom of the image, instead of keeping itself in line
to the right (as in the first example).

Am I approaching this in the wrong way? Should I just be looking at
using javascript mouseovers to achieve the effect, in order to be able
to write valid XHTML or is there some other method I could try in CSS?
Cheers,
Colin.

[Spartanicus]

"se*****@hotmai l.com" <se*****@hotmai l.com> wrote:

Have tried this (see http://www.seajays.org.uk/test_xhtml2.htm ) - and
the page now validates.

Unfortunatel y it no longer produces the effect that I wanted. The
'grey' highlight when you hover over is no longer in the entire box,
just over the title. :(
I see that you've also edited the original example, I didn't notice or
paid any attention to any hover functionality when I looked at the
original example.

[Checks in IE]

Aha, it has a hover effect in IE. Note that very few of the regulars
here use IE as their default browser, so if you upload something that
only works in IE you need to say so (and then duck :-).
Also on a high resolution screen, if the browser is maximised, the
image starts to poke out of the bottom of the grey box.
Yep, floats are removed from the flow, however there should be no need
to resort to floating the image, img elements are inline and can thus be
used as is, you can specify alignment of adjacent text with the css
vertical-align property.
Am I approaching this in the wrong way? Should I just be looking at
using javascript mouseovers to achieve the effect, in order to be able
to write valid XHTML or is there some other method I could try in CSS?

In good browsers the :hover pseudo class can be applied not just on
anchors, but on any element. Alas IE doesn't want to play that game.

I'm can't recall what the best approach is to circumvent that limitation
in IE, others will jump in I'm sure.

--
Spartanicus

[Andy Dingley]

On 10 Jan 2005 04:38:41 -0800, se*****@hotmail .com wrote:

1: <div>
2: <a href="somelink. htm">
3: <div>
4: <h2>Title</h2>
5: Some text
6: </div>
7: </a>
8: </div>

Try this

<div>
<a href="somelink. htm">
<span class="span-made-to-look-like-div" >
<span class="span-made-to-look-like-h2" >Title</span>
Some text
</span>
</a>
</div>

You can probably work out the CSS yourself.
Validity according to the DTD is just that - according to the DTD. It
takes no account of anything you do in the CSS. Besides which, the
DTD works with with a set of elements called "the set of block level
elements", it doesn't even imply any connection with the same notion
of "blockness" as a CSS display:block;

[Harlan Messinger]

"Andy Dingley" <di*****@codesm iths.com> wrote in message
news:6m******** *************** *********@4ax.c om...

Try this

<div>
<a href="somelink. htm">
<span class="span-made-to-look-like-div" >
<span class="span-made-to-look-like-h2" >Title</span>
No! A heading should be marked up as a heading. This isn't a correct
solution to his problem.
Some text
</span>
</a>
</div>