HTML & CSS
still learning the ropes of xhtml/css and I'm running into some validation issues, but I'm not quite sure how to fix them..I'm hoping someone might be able to lend a hand.
the URL in question is:
pretty much every page that actually has content has errors..a lot of them seem to be from the navigation.
here's an example of the index page through an xhtml validator:
You're not closing various tags, and that is throwing a lot of the errors. Each opening tag must have a closing tag.
Also, that's the most bizarre use of IE conditionals I've come across. Typically, conditionals tend only to be used with CSS, not for HTML structure or semantics.
I did see I missed a </li> in the navigation bar so I fixed that up and it went from 12 errors on the index page to 6..now I need to figure out what else is going on...for the conditionals..it was how I was shown to do it for a css menu so that it works in all browsers by an web instructor I had.
I fixed my problems on the index page..I closed off a missing </li> tag and I forgot to close a <p> tag!
With the donate page the first error is due to your not closing a paragraph before starting a list. Instead you have two line breaks.
The rest of the errors on that page are because you have & where you should have &
awesome..I managed to clean that page up and almost all my errors on my share page, but I'm having these 2 picky errors from within my textarea boxes:
got my contact page to validate..now I ran into issues where the form processor isn't processing it..to get the form to validate I had to remove form name and replace it with form id..what changes would I have to make in the php processor to get it to reflect the changes?
edit- fixed the contact page completely..still got to fix up that share page though.
You don't place 'px' units in the xhtml markup, wrong: ( height="168px" ). The 'px' is for CSS and if you were using xhtml it would be ( height="168" ) also the TEXTAREA cannot contain an image or hyperlink.
you learn something new every day...ok with that being said, how would I display code for visitors to grab and paste into their sites to display my site banners while it passes xhtml strict validation. I guess I could use a div and just set the width/height and an overflow, but how would I get it to display the a href and img code without displaying the image?
One popular way is to use pre and or code tags. We had a link-exchange page which needed to show the HTML for people to copy-pasta, and this sounds like what you want to do as well:
<p class="code"><code><a href="http://example.com" title="Example Co">Example Co</a></code></p>
Where example.com was our url and the title was for mouseover tooltips (rather redundant but the manager wanted them, and notice the < and > symbols were typed out manually using named character entities (if you really are writing XHTML these are still good, because remember HTML has like 200 or so of these things but real XHTML only has 5, 4 of which it shares with HTML). So the < represents "<" etc. On the web page itself, people will see the < > brackets normally.
The class of "code" was for styling. You don't have to have a class with that name and you can of course just have any styling direct in the CSS:
since "code" is a valid HTML element. I'd have to look it up but I believe code tags are inline elements like anchors.
*edit yes they are.
thanks for that...for some reason, I cannot seem to get a nice box to wrap the code...
here's my css
border: solid thin #000;
here's the xhtml I wrote to display the code:
<p class="code"><code><a href="http://www.pazrt.com"><img src="http://www.pazrt.com/images/banners/banner1.jpg" width="470" height="100" alt="pazrt.com" title="pazrt.com" style="border: 0" /></a></code></p>
nevermind... css mistake. I forgot to put the period before code.
If you are working locally give the above FireFox Addon a try.
All errors and/or warnings will be available to view as soon as you display your webpage in a browser. Hints on fixing the errors and/or warnings are shown.
The Addon also includes a neat, configurable Tidy Utility.
Wait, you have this:
border: solid thin #000;
Because code is an inline tag (like spans and anchors) then unless you make it a block, it cannot have dimensions like that. They will be ignored.
This is why in my example I have a <p> wrapping it. P's are blocks and can haz dimensions. On the actual page I have that code in, it's actually part of a definition list, so it's in a <dd>.
Beware code is a reserved word and may introduce problems!!!!!
HTML doesn't have reserved words, just tags. Code is a HTML valid tag.