...

View Full Version : Almost Validated! Just need a little help



GarrettH
02-17-2009, 08:29 PM
Hello,

I almost have a w3c validation for my website. I only have 5 errors left and they all have to do with the paragraph (<p>) tags. I am using HTML 4.01 Transitional DOCTYPE. I have read that <p> tags are depreciated, but I can't seem to find an valid alternative to replace them. I guess I'll have to change my css too?

Thanks

mike182uk
02-17-2009, 08:30 PM
you will probs be best posting your code on here or your validation info or a link to your site

Excavator
02-17-2009, 08:35 PM
Hello GarrettH,
p tags are definitely not depricated. Where did you read this?

Post some of your code with p tags that the validator doesn't like, let us see what's going on instead of guessing.

GarrettH
02-17-2009, 08:39 PM
you will probs be best posting your code on here or your validation info or a link to your site

Disclaimer
No problem, but I should probably mention that the site content deals with marijuana use, so some people may be offended.

Website: www.potclassified.com

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang=en>
<head>
<title>Pot Classified Home</title>
<link rel="stylesheet" type="text/css" href="http://www.potclassified.com/core-styles.css">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META name="description" content="A collection of great ideas formulated by people who use marijuana. The only website dedicated proving that marijuana enhances creativity and artistry.">
<META name="keywords" content="marijuana, pot, Dr GreenBrain, weed, high, stoned, great idea, thinking, ganja, bong, smoke, chronic, philosophy, 420, Pot Classified, mmj, medical marijuana, grass, green, creativity, bud">
<link REL="SHORTCUT ICON" HREF="http://www.potclassified/images/favicon.ico">
</head>
<body>
<div id="header"></div>
<div id="leftcolumn">
<div id="navbar">
<ul><li><a href="http://www.potclassified.com/index.html">Home</a></li>


<li><a href="http://www.potclassified.com/ideas.html">Idea Gallery</a></li>
<li><a href="http://www.potclassified.com/archives.html">Archives</a></li>

<li><a href="http://www.potclassified.com/submit.html">Submit An Idea</a></li>
<li><a href="http://www.potclassified.com/about.html">About Pot Classified</a></li>
<li><a href="http://www.potclassified.com/help.html">Help Pot Classified</a></li>
<li><a href="http://www.potclassified.com/resources.html">Resources</a></li>
<li><a href="http://www.potclassified.com/advertise.html">Advertise</a></li>
<li><a href="http://www.potclassified.com/contact.html">Contact</a></li>
</ul></div>

<br><br>
<center>
<a href="http://www.potclassified.com/advertise.html"><font color='black'><b>Plant Your Ad Here...<br>

<img src='http://www.potclassified.com/images/purplebong.gif' alt="Generic Bong"><br>
...And Business Will Grow</b></font><br></a>
<br><br>


<a href="http://www.potclassified.com/advertise.html"><font color='black'><b>Roll Your Promo Here...<br>
<img src="http://www.potclassified.com/images/purevidagrow.jpg" alt="growth formula" width="30%"><br>
...And Smoke The Competition</b></font></a>

</center>


</div>
<div id="maincontent">

<h1>Welcome to pot classified, the only website dedicated to proving that the use of marijuana enhances creativity and artistry!</h1>
<img src="http://www.potclassified.com/images/bongbulb.gif" alt="Bong with Light Bulb" align=left height='350px'>
<h2>Have you ever come up with a great idea while you were high?</h2>
<h3>Maybe you've thought of...</h3>
<p1>A Movie Plot - Making A Smoking Device - A New Game - Building Unique Furniture - Creating Art - Creating Trash - Writing A Short Story - A Business Concept - Inventing Something - A New Recipe - A Computer Program - Something Original - Something Funny - Something Diabolical - Something That Might Benefit Human Kind!</p1><br><br>

<p4>Or maybe you just have a unique smoking ritual you'd like to share! Well, you've come to the right place. I believe that people have a unique ability to tap into their creative side when they smoke or otherwise use marijuana, so I want to hear it all. From practical to practically insane and from silly to serious. Your ideas could be published on this site and/or in a book.</p4><br><br>

<p3><center>SO GET HIGH, GET CREATIVE, AND SHARE YOUR THOUGHTS WITH THE WORLD!</center></p3><br>


<p1>There are three ways you can contribute your ideas. First, you can submit them to me by <a href="mailto:drgreenbrain@potclassified.com"><u>email</u></a> where you can send your ideas, pictures, and videos. Next, you can download the <a href="http://www.potclassified.com/submit.html">Original Postcard</a>, print it out, paste your ideas on the front, and send it back to me. Or, you can create your own <a href="http://potclassified.com/submit.html">mailing envelope/package</a> and mail it to me.</p1><br>

<p2><center>Think I'm Going To Sell Your Ideas To The Man?</center><br>

Wrong! I'm not here to blow anyone's high. I hereby state that I will not directly use any of the ideas submitted to achieve monetary gain a without written consent of the person who originally formulated it. Worried that a 3rd party might see your idea and use it for their gain? Well, all of the submission will fall under the copyright of the website, so if you find your idea has been stolen, We can both go after them!<br><br>

Cheers,<br>
Dr. GreenBrain





</div>



<div id="footer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="W3C CSS Validation" align="left">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="W3C CSS Validation" align="right">
Created By Dr. GreenBrain<br>
All Rights Reserved <br>
Copyright <img src="http://www.potclassified.com/images/copywrite.gif" width="12px" alt="copyright symbol"> 2009


</div>

</body>
</html>

CSS Code:

body {margin: 2px;
padding: 2px;
background-image: url(http://www.potclassified.com/images/bggrade.gif);
background-repeat: repeat-y;
background-position: right;
font-family: sans-serif;
line-height: 1.4em;
font-size: small;
}

div#header {
background-image: url(http://www.potclassified.com/images/header.gif);
background-repeat: no-repeat;
width: 86%;
min-width:1000px;
height: 125px;
background-color: #00ff00;
margin-bottom: 10px;
border: ridge #660066;
}

div#footer {
text-align: center;
width: 86%;
clear: both;
background-color: #660066;
color: #ffffff;
border-style: ridge;
border-color: #00ff00;
border-width: 3px;
}

div#maincontent {padding: .5%;
margin-left: 13%;
width: 72%;
min-width: 820px;
height: 750px;
background-color: #ffffff;
margin-bottom: 5px;
border: ridge #999999;
overflow: scroll;
}

div#leftcolumn {padding: .5%;
background-image: url(http://www.potclassified.com/images/weedback11.gif);
height: 750px;
float: left;
background-color: #ffffff;
width: 11%;
min-width: 140px;
border: ridge #999999;
}
a:link {color: #660066;
background-color: #ffffff;
text-decoration: none;
}
a:hover {color: #00ff00;
background-color: #cccccc;
}
h1 {color: #000000;
background-color: #ffffff;
font-family: serif;
font-size: 2.5em;
text-align: center;
font-weight: bold;
line-height: normal;
}
h2 {color: #660066;
background-color: #ffffff;
font-family: serif;
font-size: 2em;
text-align: left;
font-weight: bold;
font-style: italic;
line-height: normal;
}
h3 {font-family: serif;
font-size: 1.5em;
font-weight: bold;
line-height: normal;
}
h4 {font-family: serif;
font-size: 1em;
font-weight: normal;
}

p1{font-family: serif;
font-size: 1.5em;
line-height: normal;
}
p2{font-family: serif;
font-size: 1.5em;
color: #ffffff;
background-color: #00ff00;
display: block;
line-height: normal;
}
p3{font-family: serif;
font-size: 1.5em;
color: #ffffff;
background-color: #660066;
display: block;
line-height: normal;
}
p4{font-family: serif;
font-size: 1.5em;
color: #339900;
background-color: #ffffff;
line-height: normal;
}

div#navbar {font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1.1em;
font-weight: bold;
text-align: left;
background-color: #ffffff;
border-top: none;
border-bottom: none;
font-weight: bold;
padding: 2px;
width: 140px; }
#navbar ul li a:link, #navbar ul li a:visited {color: #660066;
background-color: #ffffff;
text-decoration: none;
display: block;
border-top: solid #de7c63 1px;
border-left: solid #999999 1px;
border-bottom: solid #8f351e 1px;
border-right: solid #999999 1px;
padding-top: 3px;
padding-left: 15px;
padding-bottom: 3px; }
#navbar ul li a:hover, #navbar ul li a.current {color: #00ff00;
background-color: #ffffff;
text-decoration: none;
border-top: solid #8f351e 1px;
border-bottom: solid #de7c63 1px; }
#navbar ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
display: block;
}
#navbar ul {
margin: 0px;
padding: 0px;
}

Validation info (exact same error for <p1>-<p4>):

# Error Line 53, Column 3: element "P1" undefined.

<p1>A Movie Plot - Making A Smoking Device - A New Game - Building Unique Furnit



You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).

mike182uk
02-17-2009, 08:41 PM
on the p tags, dont put p1, p2 etc.

just use <p> for paragraphs

i think your getting mixed up with headers i.e h1,h2

that should clear the errors in validation.

GarrettH
02-17-2009, 08:45 PM
Hello GarrettH,
p tags are definitely not depricated. Where did you read this?


I read on http://www.w3schools.com/tags/tag_P.asp All "presentation attributes" of the p element were deprecated in HTML 4.01, and are not supported in XHTML 1.0 Strict DTD.

Looking at it again, I think I m misunderstanding it. I am pretty new to development.

GarrettH
02-17-2009, 08:48 PM
on the p tags, dont put p1, p2 etc.

just use <p> for paragraphs

i think your getting mixed up with headers i.e h1,h2

that should clear the errors in validation.

Mike,

Thanks for the info. I was using <p1>,<p2>, etc. because each level has a different style (i.e. one uses white text with a purple background). Is this I should do in CSS or is it better to use just 1 <p> and format the style in HTML?

mike182uk
02-17-2009, 08:53 PM
yeh you'll be best doing this in css by adding a class to your html tag.

so insted of <p1>blah</p1>

use something like

<p class="para1">blah</p>
<p class="para2">blah again</p>

then in the css

.para1 {color:#333; background-color:#93C;}
.para2 {color:#333; background-color:#93C;}

etc.

just change the color codes to your colors

its good practice to keep style (css) and content (html) seperate from each other

GarrettH
02-17-2009, 09:01 PM
Ok, I'll see if it works.

So in css it will look like:

p{font-family: serif;
font-size: 1.5em;
line-height: normal;
}

.para1 {color:#333; background-color:#93C;}
.para2 {color:#333; background-color:#93C;}

mgs5053
02-17-2009, 09:02 PM
Not sure if this is just me, but did you check your footer stuff? In the bottom left I see text shooting 3 lines out of the footer into the white blank background.

GarrettH
02-17-2009, 09:05 PM
Not sure if this is just me, but did you check your footer stuff? In the bottom left I see text shooting 3 lines out of the footer into the white blank background.

nope, what browser are you using? I've been having some display issues across multiple browsers. Any ideas on how to fix this?

mike182uk
02-17-2009, 09:10 PM
Ok, I'll see if it works.

So in css it will look like:

p{font-family: serif;
font-size: 1.5em;
line-height: normal;
}

.para1 {color:#333; background-color:#93C;}
.para2 {color:#333; background-color:#93C;}


yeh or just format it different:

.para1 {
color:#333;
background-color:#93C;
}

but remember on the p tags, to add the class to it. so <p class="para1"> etc

mgs5053
02-17-2009, 09:17 PM
Nevermind... upon a little further looking into I found out that it wasn't actually the footer, it was the "Roll your promo here" ad that had been pushed down. My resolution is quite high, so I was using a much larger than defualt font in my Mozilla. I turned it down to size 14 or whatever and it all fits... and it worked fine in my IE as well.

I'm assuming its with your em relative sizes... I'm not sure but I think setting a definitive size on those things would do the trick.

GarrettH
02-17-2009, 09:25 PM
Ok Mike,

It's validating now (Thank you), but the background colors won't display how I'd like them too. Any thoughts on that?

Here is the cod I used

CSS:

p{font-family: serif;
font-size: 1.5em;
line-height: normal;
}

.para1{color: #ffffff;
background-color: #00ff00;
display: block;
line-height: normal;
}

.para2{
color: #ffffff;
background-color: #660066;
display: block;
line-height: normal;
}

.para3{color: #339900;
background-color: #ffffff;
line-height: normal;
}

HTML:

<p class="para3">Or maybe you just...
<p class="para2"><center>SO GET HIGH...
<p>There are three ways you can...
<p class="para1"><center>Think I'm Going...


I didn't use any </p> tags because w3c said I shouldn't

Apostropartheid
02-17-2009, 10:36 PM
</p> tags are optional in HTML, forced in XHTML. I would recommend you use them because it definitely helps finding where an element ends, plus being more logical. Be careful when reading the specs. I would suggest taking tutorials, which explain what's valid and what's not in plainer English.

mike182uk
02-17-2009, 10:48 PM
yeh i agree with cyanlight, id use the </p> tags.

how do you want the backgrounds to display? whats wrong with them at the mo?

also on the line:

<p class="para2"><center>SO GET HIGH...

id put the <center> tag in the css. so your not cluttering up your markup

so

.para2{
color: #ffffff;
background-color: #660066;
display: block;
line-height: normal;
text-align: centre;
}

Apostropartheid
02-18-2009, 12:23 AM
@mike: center*

GarrettH
02-18-2009, 04:57 PM
That Worked. THanks everyone for your help

jerry62704
02-18-2009, 05:04 PM
Sorry if someone already mentioned this.

You might be using the <p> tag as a header tag. Those, <h1> to <h6>, do have different styles associated with them. But they are for the purpose of organizing your content, not as a styling thing. The difference is Search Engines will use them for determining what is on your page and could care less if it is bold, larger type or whatever.

You should have an <h1> just like you have a <title> on every page. It is the "what this page is" information. Then if you have different sections like a main content section and divisions under that you might have an <h2> for the main content and <h3> for each section under it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum