HTML Error

Reply Subscribe

Thread Tools

Search this Thread

21 August 2012, 05:34 PM

GazTheHat

Scooby Regular

Thread Starter

Join Date: Aug 2005

Location: 392/361 MY04 STi

Posts: 7,638

Likes: 0

Received 0 Likes on 0 Posts

HTML Error

<ul class="gallery">
<li>
<a href="bar.htm" class="thumb" style="background-image:url(images/stellaBW.jpg)">
<span><img src="https://www.scoobynet.com/images/stella.jpg" alt="Bar" title="To the Bar" /></span>
<h2>Drinking</h2>
<h3>Something for everyone</h3>
</a>
</li>

I don't understand what's wrong with this. It all looks right, just when i validate it, i get this error:

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

<h2>Drinking</h2>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Also get the same error for the H3 tag.

Reply Like

21 August 2012, 06:29 PM

MDS_WRX

Scooby Regular

iTrader: (1)

Join Date: Oct 2010

Location: Darlington

Posts: 500

Likes: 0

Received 0 Likes on 0 Posts

It's saying that the h2 tag isn't allowed within the anchor tag (as a h2 tag is a block level element, whereas an anchor tag is an inline tag).

You could use spans instead of h2/h3 and styling them to look the same, but it really depends on whether you think they need to be headers or not. Also,
what doctype are you using?

Reply Like

21 August 2012, 06:42 PM

GazTheHat

Scooby Regular

Thread Starter

Join Date: Aug 2005

Location: 392/361 MY04 STi

Posts: 7,638

Likes: 0

Received 0 Likes on 0 Posts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Just change them to Spans do you think?

Having a right game changing to spans, as the CSS is nested...

ul.gallery {
width: 902px; list-style: none; margin: 0 auto; padding: 0; float:left; overflow:hidden;
}

ul.gallery li {
float: left; padding: 0; display: inline-block; margin-right:25px; margin-bottom:25px;
}

ul.gallery li a.thumb {
width: 284px; height: 328px; cursor: pointer; background-repeat:no-repeat; background-position:top; background-color:#dc0021 }

ul.gallery li img { /*--Used to crop image--*/
width: 284px; height: 239px; float:left; display:none }
ul.gallery li span {
height:239px; width:284px; float:left; }
ul.gallery li a { display: block;}
ul.gallery li a h2 {
color:#FFF; font-size:34px; line-height:24px; padding:0; margin:18px 0 2px 12px; display:inline-block; font-family: sans-serif; }
ul.gallery li a h3 {
font-family: futura-pt,sans-serif; font-weight: 500; color:#FFF; font-size:16px; padding:0; margin:0 0 0 12px; text-transform:uppercase; text-decoration:bold; }

Last edited by GazTheHat; 21 August 2012 at 07:21 PM.

Reply Like

21 August 2012, 07:34 PM

MDS_WRX

Scooby Regular

iTrader: (1)

Join Date: Oct 2010

Location: Darlington

Posts: 500

Likes: 0

Received 0 Likes on 0 Posts

As you already have a CSS definition for spans within the list, I'd consider adding specific classes to each one to target them individually e.g

Code:

<ul class="gallery">
    <li>
    <a href="bar.htm" class="thumb" style="background-image:url(images/stellaBW.jpg)">
    <span class="galleryimage"><img  src="http://images.ibsrv.net/ibsrv/res/src:bbs.scoobynet.com/get/images/stella.jpg"  alt="Bar" title="To the Bar" /></span>
    <span class="galleryheadera">Drinking</span>
        <span class="galleryheaderb">Something for everyone</span>
    </a>
    </li>

the you could target them with:

Code:

ul.gallery li span.galleryimage {
    height:239px; width:284px; float:left; }
ul.gallery li span.galleryheadera {font-weight:bold;font-size:14pt;}
ul.gallery li span.galleryheaderb {font-weight:bold;font-size:12pt;}

Or, as an alternative, keep your original code but have multiple anchors within each h2/h3 etc.

Reply Like