Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: Validation Help

  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts

    Macintosh Validation Help

    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:
    Code:
    <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:
    Code:
    .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;
    }

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    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

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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> ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts
    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

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This code taken from the "Sources" site in my signature; prints the text out OK.

    Does this help?

    Frank

    Code:
    <li ><a href="http://www.elated.com/articles/CSS-FLOATS/">CSS FLOATS. What can you use them for?</a></li>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The paragraph isn't needed. This works fine
    Code:
    <li id="Afghanistan" class="green"><a href="javascript:selectme(1,0,29)" class="infantry">1</a></li>
    Code:
    .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;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts
    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

    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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts
    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.
    Last edited by ptmuldoon; 05-13-2008 at 11:58 PM.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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:

    Code:
    <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
    Code:
    <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.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The validator can't parse server side languages. AGAIN update your code in the link you posted.
    Last edited by _Aerospace_Eng_; 05-14-2008 at 02:08 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •