PDA

View Full Version : validator doesnt like this code, why?



LJackson
Oct 5th, 2009, 03:21 PM
Hi all, im trying to validate my page and im having trouble with <div class="individual_product"> its saying document type does not allow element "div" here??? here is the code


<a href="price_results.php?title=<?php echo $shortTitle?>&amp;category=CD&amp;info=<?php echo $artist?>">
<div class="individual_product">
<div class="CD_individual_productImage">
<img src="<?php echo $image ?>" height="110px" alt="<?php echo $shortTitle?>" title="<?php echo $shortTitle?>" />
</div>

<div class="individual_productTitle">
<?php print $shortTitle."<br />By: ".$artist?>
</div>
</div>
</a>

why is it throwing up that error?
thanks
Luke

Rowsdower!
Oct 5th, 2009, 03:25 PM
Hi all, im trying to validate my page and im having trouble with <div class="individual_product"> its saying document type does not allow element "div" here??? here is the code


<a href="price_results.php?title=<?php echo $shortTitle?>&amp;category=CD&amp;info=<?php echo $artist?>">
<div class="individual_product">
<div class="CD_individual_productImage">
<img src="<?php echo $image ?>" height="110px" alt="<?php echo $shortTitle?>" title="<?php echo $shortTitle?>" />
</div>

<div class="individual_productTitle">
<?php print $shortTitle."<br />By: ".$artist?>
</div>
</div>
</a>

why is it throwing up that error?
thanks
Luke

Well, <div> elements are block-level elements and <a> elements are inline. It's not valid to place a block-level element inside of an inline element (even if you use display:block; on the link). If you change the div elements to spans instead and give the spans display:block; it will validate and should look just however it does right now. It's kind of hacky, but it works.

LJackson
Oct 5th, 2009, 03:27 PM
ok it was because of the div inside of the <a> tag which was the problem :)

LJackson
Oct 5th, 2009, 03:28 PM
hi mate thanks for your reply, i didnt think of changing the divs to spans :) will try that will be better than just adding the links to the two pieces of data i want links...

cheers mate
Luke

Scriptet
Oct 5th, 2009, 03:46 PM
Ontop of that I think you might be using more DIV's than needed anyways.

Seems like a SPAN or a P should go around the artist name, but as for the div around the image and the div around both of them seem like they are pretty redudant as you could style the image and the anchor itself.

Although it depends you might need them if you're doing some special technique, e.g using multiple backgrounds.

LJackson
Oct 5th, 2009, 04:56 PM
i have a hover effect over the main div which changes the colour of the border :)

Scriptet
Oct 5th, 2009, 04:57 PM
i have a hover effect over the main div which changes the colour of the border :)

But couldn't you just add that to the a tag, would mean it works on IE6 aswell, as :hover only works on a's in IE6

LJackson
Oct 5th, 2009, 05:11 PM
hmmm didnt know that :) thanks will try that out..

one other problem im having is i have a widget from amazon on my page which is causing quite a few problems, here is its code

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac" width="120px" height="400px"> <param name="movie" value="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8009%2F61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac&amp;Operation=GetDisplayTemplate"><param name="quality" value="high"><param name="bgcolor" value="#FFFFFF"><param name="allowscriptaccess" value="always"><embed src="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8009%2F61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac&amp;Operation=GetDisplayTemplate" id="Player_61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac" quality="high" bgcolor="#ffffff" name="Player_61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac" allowscriptaccess="always" type="application/x-shockwave-flash" align="middle" height="400px" width="120px" ></embed></object> <noscript><a href="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8009%2F61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac&amp;Operation=NoScript">Amazon.co.uk Widgets</a></noscript>


and here are the errors its causing

end tag for "param" omitted, but OMITTAG NO was specified
Attribute "src" exists, but can not be used for this element.
Attribute "id" exists, but can not be used for this element.
Attribute "quality" is not a valid attribute
Attribute "bgcolor" exists, but can not be used for this element.
Attribute "name" exists, but can not be used for this element
Attribute "allowscriptaccess" is not a valid attribute


but im not sure why it doesnt like them?

any ideas
thanks
Luke

VIPStephan
Oct 5th, 2009, 05:20 PM
Use SWFObject (http://code.google.com/p/swfobject/) to include Flash objects.

Scriptet
Oct 5th, 2009, 05:46 PM
Yeah there's many ways to include flash objects, but I mean if the code is from Amazon, I think you can just take it for what it is, and accept it might not validate. I mean even the embed codes provided by Youtube don't validate correctly.

In addition to swfObject, there's a way to include flash without the embed from what I remember, just by using the object tag, but they all have their advantages and disadvantages, and plus I think embed is valid in anyhow HTML 5.

LJackson
Oct 5th, 2009, 05:50 PM
hi VIPStephan,

thanks for your reply, on first look it looks very complex :(

but i will check it out properly later on :)

thanks
Luke

Apostropartheid
Oct 5th, 2009, 05:54 PM
Or else you can embed it using valid code:


<object width="120" height="400" type="application/x-shockwave-flash"
data="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8009%2F61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac&amp;Operation=GetDisplayTemplate">
<param name="movie"
value="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8009%2F61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac&amp;Operation=GetDisplayTemplate"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="allowscriptaccess" value="always"/>
<p>You need Flash to get view this object. <a href="http://get.adobe.com/flashplayer/">Get Adobe Flash</a>
</object>

LJackson
Oct 5th, 2009, 06:25 PM
thanks Apostropartheid thats so easy to understand :)

managed to change some other files to get them validating :D

thanks mate, and thanks to everyone who contributed :)
Luke

LJackson
Oct 5th, 2009, 07:29 PM
one last question :)

is it possible to get this to work for IE6? nothing shows up at the moment just the container no content any ideas?

thanks
Luke

Scriptet
Oct 5th, 2009, 09:15 PM
What's not showing up the flash or the page etc.. and do you have a link/and or post the HTML you haven't already..

LJackson
Oct 5th, 2009, 11:20 PM
hi mate the flash isnt showing up i get the flash container but no content (in IE6)

my flash code is

<div class="amazon_widget">
<object width="120" height="300" type="application/x-shockwave-flash"
data= "http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8014%2Fcf8fe3ce-bd90-4a07-8717-a11be71763a8&amp;Operation=GetDisplayTemplate">
<param name="movie"
value="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8014%2Fcf8fe3ce-bd90-4a07-8717-a11be71763a8&amp;Operation=GetDisplayTemplate"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="allowscriptaccess" value="always"/>
<p>You need Flash to get view this object.
<a href="http://get.adobe.com/flashplayer/">Get Adobe Flash</a>
</p>
</object>
</div>

and


<div class="amazon_widget">
<object width="120" height="400" type="application/x-shockwave-flash"
data="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8009%2F61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac&amp;Operation=GetDisplayTemplate">
<param name="movie"
value="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822%2FGB%2Fkernconn-21%2F8009%2F61a2b2e6-5ac8-43a9-8c21-847c9e24a4ac&amp;Operation=GetDisplayTemplate"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="allowscriptaccess" value="always"/>
<p>You need Flash to get view this object.
<a href="http://get.adobe.com/flashplayer/">Get Adobe Flash</a>
</p>
</object>
</div>

but neither one of them shows up?

any ideas?

thanks
Luke