My html looks like this for my menu buttons:

<div id="buttons">
<ol>
<li><a href="home.html" title="Home"><div id="home">Home</div></a></li>
<li><a href="about.html" title="About Us"><div id="about">About Us</div></a></li>
<li><a href="faq.html" title="FAQ"><div id="faq">FAQ</div></a></li>
<li><a href="services.html" title="Services"><div id="services">Services</div></a></li>
<li><a href="portfolio.html" title="Portfolio"><div id="portfolios">Portfolios</div></a></li>
<li><a href="blog.html" title="Blog"><div id="blog">Blog</div></a></li>
<li><a href="contact.html" title="Contact Us"><div id="contact">Contact Us</div></a></li>
</ol>
</div>

When I checked its validation at WC3, it says that divs are block level items and that they cannot be placed within I am assuming the link tags- but/and it could be the list tags.

What is the best way to rewrite the code so it is valid? I need to be able to specifically target each button so that I can do image replacements in css. Right now everything works fine, should I be concerned about how browsers will read the code?/ Can my illegitimate code cause trouble with other elements within my document?

Thank you so much!

divs are block level items and that they cannot be placed within I am assuming the link tags

Correct, you cannot put divs inside of <a> tags - or any other block level element inside an inline element.

I need to be able to specifically target each button so that I can do image replacements in css.

You don't need a div to do that. Put the ID on each <a> tag and the css image rollover will work just as well.

So, you'd have this:

<li><a id="home" href="home.html" title="Home">Home</a></li>

should I be concerned about how browsers will read the code?

YES!!

Can my illegitimate code cause trouble with other elements within my document?

It is possible, yes.

Why are you using an ordered list instead of an unordered list ? Are you menu items numbered ???

Thank you so much! That makes a lot of since. I forgot that you could ID other kinds of tags.

One more question- now that I put the id in the link tags, how should i be calling them out in css? Because #home{ #a home{ a home- none of that is working. It's showing the original text over the top of my images which have been misplaced by a few pixels by I assume the text that is over the top.

I tried a # home{ like css edit is seeming to indicate it the correct term, but when I try that the link ceases to be a link (aka isn't clickable) and my replacement image disappears leaving only the unwanted text

i was wrong- they are still links (clickable), but my replacement image is nowhere to be found

(my image replacements were working perfectly before I fixed the WC3 validation problem located in html- [the beginning of this thread])

I just saw your question about ordered vs. unordered lists- No, my menu is not numbered I have the text-decoration: none

I guess I didn't know why one mattered much over the other, and I didn't want my menu links to get in a different order than the one specified in html (not that I think they do in unordered lists) Is there a reason that I should change it- because that would be an easy fix.

Please read thread reply #5-7

for image replacement, here is the method I use.
http://www.cssplay.co.uk/menus/flickerfree_mk3.html

View the source, the CSS is in the head for both types of menu displayed on the page. You should be able to get your's to work like this with a few changes.

I tried a # home

Remove the spaces, it should be a#home and that should work.

I guess I didn't know why one mattered much over the other, and I didn't want my menu links to get in a different order than the one specified in html (not that I think they do in unordered lists)

You mis-understand the purpose of an ordered list - it's used to make a NUMBERED LIST, and using text-decoration: none will do nothing, all that does is remove the underline from a link.

Is there a reason that I should change it- because that would be an easy fix.

Semantically, it should be an unordered list, since your menu is not a NUMBERED LIST at all.

GeekSpecialties: Thank you, but that is already how I do image replacements. As I said, my image replacements were working just fine until I decided to validate my code.
I tried a#home and I am still having trouble with the text being over the top- aka my
text-indent: -5000 px is not working. (All my code is valid now, and I did change my ol to an ul.)

Ok, so give us a URL or ALL of the code so we can figure out why it's not working.

Alright, here is the url
http://creative-synthesis.com/

I am primarily concerned about the links right now, but if you see any other problems please let me know.

Set your #buttons a to display:block, then the text indent will work properly

Thank you! The links look great.