Validation - what correction is required?

learning to make corrctions

[Greencrystal]

Hello - I hope someone can help me with this little problem (little to you big prob for me!)

Just to explain
Im building a website with a small directory. For the directory Im using

html:
<p class="a"> <a href="A.html">A</a></p>

css:
a:link
{
font-family: arial, heletica, sans-serif;
font-size:130%;
font-weight:lighter;
color: #000099;
text-decoration:none;
outline:none
}

Ive got the hover and visited respectively and it works fine

So I needed a new link with different attributes so I tried:

html:
<p class="example"><a href="http://www.example.com/us/dictionary.aspx?Af=02">Example</a></p>

css: p.example
{font-family: "Monotype Corsiva", cursive;
position:absolute;
margin-top:350px;
left:551px;
font-weight:bold;
font-size: 24px;
}

this link is taking on the attributes of the a:link above therefore the font for instance is Arial rather than corsiva however, the margin top and font weight is working.

When I validated it to see what was wrong it said below, then I realised that it gave this error for all my alphabet links of the directory even the ones that I am completely able to control

# Error Line 107, Column 23: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<p class="example"><a href="http://www.example.com/us/dictionary.a

✉

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>").

What does this mean? Ive tried <a> its not working?

Please advise

Thanks in advance

May I ask is there somewhere where we can go to see examples of validated and correct syntax?

[edited by: tedster at 11:29 pm (utc) on Dec. 29, 2009]
[edit reason] switch to example.com - it cannot be owned [/edit]

[tedster]

The validation error gives you a hint - the problem is probably not within the code that you posted but rather somewhere earlier on the page. Most likely, you have not closed an earlier inline element. And so the <p> element (which is a block level element) is not allowed within that inline element.

I'm not sure that this will resolve your CSS issue, but first things first - you're correct to make sure that the mark-up validates first when debugging display issues.

[Greencrystal]

Hi there, I'll clear up the code as the problems arise starting from the first on the page and take it from there...Thanks for the tip :)

[milosevic]

I'm really not sure about the example code you show.

The <p class="a"> is surely completely redundant, since you are styling the html anchor tag <a> with the css rule for a:link, not a class called "a".

The second piece of code, the element you are styling is the anchor, not the paragraph, so instead of

<p class="example"><a href="http:...>

Why not just use

<a class="example" href="http:..>

As another point, if the "class=a" styles were to be the default on the site, the html element that it applies to should be styled instead of using a class (which is actually what you have done, unwittingly or not)

You also spelled "helvetica" wrong in your font-family rule.

[Greencrystal]

Hi Milosevic - perhaps Ive not been clear - or maybe I have..Im not even sure anymore! - but the p class="a" is a link but its a link for the alphabet A thats why Ive used "a" - so Im using it to define the alphabet letter rather then the link

However, you are right there is something Im doing very wrong with regards to how Im anchoring my links.

Thanks for the correction re heletica! I am validating my xhtml and css.

so re to the anchoring of a link if I use

<a class="example" href="http:..>

the css will be
example:link
example:visited
example:hover

so for the next link I should do
<a class="example1" href="http:..>
example1:link
...and so on?

Many thank in advance and wishing everyone a HAPPY NEW YEAR! :)

[tedster]

example:link
example:visited
example:hover

you need to make example a class - that is you need at least a preceding period. I'd suggest this

a.example:link
a.example:visited
a.example:hover

[Readie]

If you are having a different class for every letter, it may be wiser to simply remove the font face and size attributes from the "a:link" etc in your css document, and always have such things declared with a <p> or a <span>

[swa66]

styling link, visited and hover independently: [webmasterworld.com...]

# Error Line 107, Column 23: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

the <p> is not allowed where it is sitting in (I've no idea where it is). Got nothing at all to do with CSS nor with the <a> in it), it's what's around the <p> that's unsuitable for having a <p>.

[Greencrystal]

Many thanks for replies - and to the link....its making more and more sense ....