...

View Full Version : Validation Help



ptmuldoon
05-10-2008, 02:32 AM
I've got almost my whole site validating xhtml transitional except for one page, that is giving the below error:

does not allow element "p" here;


The code for that line looks like:

<ul class="map">
<li id="Afghanistan" class="green"><a href="javascript:selectme(1,0,29)" class="infantry1"><p>1</p></a></li>

Now, I understand you can't use <p> inside the <a tag, but I'm unsure how to get the value 1 to appear correctly.

part of my css includes the following:


.map li a p{
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bolder;
text-align: center;
padding:0 2px 0 2px;
margin:0;
height: 12px;
border: 1px solid black;
color:black;
left: 27px;
bottom: -3px;
z-index:4;
}

FWDrew
05-10-2008, 03:25 AM
Quick thought,

Can you use the span tag inside the a tag? Im not sure of the top of my head, but I would try it.

If so then just change the "p" in your CSS to "span"

Drew

abduraooft
05-10-2008, 09:40 AM
div,p etc are block level elements and can't be used inside inline elements like a, span etc. But you could use an inline element within an inline element, or block element.

BTW, why do you need an extra element inside your <a> ?

ptmuldoon
05-10-2008, 02:40 PM
Well, the <p> tag is being used to offset the value (number of units) available for the image associated with it. The class of image1 is getting the image, and then just below and to the right of the image is the unit value/number.

The only way I've gotten it to look correctly is with the <p tag inside the <a href. I'm unsure of how to offset the value below and to the right of image without using the <p tag

effpeetee
05-10-2008, 02:44 PM
This code taken from the "Sources" site in my signature; prints the text out OK.

Does this help?

Frank


<li ><a href="http://www.elated.com/articles/CSS-FLOATS/">CSS FLOATS. What can you use them for?</a></li>

_Aerospace_Eng_
05-10-2008, 08:19 PM
The paragraph isn't needed. This works fine

<li id="Afghanistan" class="green"><a href="javascript:selectme(1,0,29)" class="infantry">1</a></li>


.map li a {
display:block;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bolder;
text-align: center;
padding:0 2px 0 2px;
margin:0;
height: 12px;
border: 1px solid black;
color:black;
left: 27px;
bottom: -3px;
z-index:4;
text-decoration:none;
}

ptmuldoon
05-13-2008, 06:35 PM
Thanks for help guys, yet I'm still struggling to get this to validate. To try and help, I'm put the html output into a file to give an example of the issue.

You can see the html output Here (http://www.fantasy-sports.org/netrisk/test_image.html)

The problem is in trying to keep the unit values 1, 4, 25, etc in its current location beneath each image like it shown. But to do it without the <p> tag (or some other way) so that it validates correctly.

_Aerospace_Eng_
05-13-2008, 08:25 PM
And what was wrong with my solution? It does the same thing as your original code WITHOUT the paragraph. Just make the links display:block; and you can apply padding and what not to them. I suggest doing some HTML and CSS tutorials.

ptmuldoon
05-13-2008, 10:59 PM
Edit:

Ok, I got that all worked out, and now just have 1 error on the page of:



Line 139, Column 15: syntax of attribute value does not conform to declared value.
<li id="" class=""><a href="javascript:select(,,)" class=""><span class="

The value of an attribute contained something that is not allowed by the specified syntax for that type of attribute. For instance, the “selected” attribute must be either minimized as “selected” or spelled out in full as “selected="selected"”; the variant “selected=""” is not allowed.

My problem is that when viewing the source code, I do not see any code that has a blank id="" as shown in the error.

_Aerospace_Eng_
05-14-2008, 12:40 AM
You can't have empty ids or classes. There needs to be something in them. If you aren't going to put anything in them then leave them out of your code. Please update your code in the link you gave us.

ptmuldoon
05-14-2008, 01:08 AM
You can't have empty ids or classes. There needs to be something in them. If you aren't going to put anything in them then leave them out of your code. Please update your code in the link you gave us.

Thats the issue... There are no empty id's or classes. I'm trying to troubleshoot and believe it has something to do with the id's and classes being populated on a template variable. The actual section of code looks like:



<div class="column-in">
<ul class="map">
<li><img src="images/maps/worldmap_{MapType}_{CSS}.jpg" border="0" height="568" width="825" alt="map" /></li>
<!-- START BLOCK : states -->
<li id="{Country}" class="{Color}"><a href="javascript:select{JSelect}({SelectID},{Attackable},{TID})" class="{UnitCss}">{Army}</a></li>
<!-- END BLOCK : states -->
</ul>
</div>


And then the actual html output of that code looks like


<div class="column-in">
<ul class="map">
<li><img src="images/maps/worldmap_r1_org.jpg" border="0" height="568" width="825" alt="map" /></li>
<li id="Afghanistan" class="green"><a href="javascript:selectme(1,0,29)" class="infantry1">1</a></li>
<li id="Alaska" class="blue"><a href="javascript:selectthem(1,0,1)" class="infantry1">1</a></li>
<li id="Alberta" class="blue"><a href="javascript:selectthem(2,0,3)" class="infantry1"1</a></li>
</ul>
</div>

There are no empty id's or classes. I've even searched all of the html output and its not there. And when I change all the template variables to a hardcoded string, there is no error.

_Aerospace_Eng_
05-14-2008, 03:05 AM
The validator can't parse server side languages. AGAIN update your code in the link you posted.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum