CSS Only Tip with multiple colors

Code validation fails using <p> inside <a>

[Wintland]

Hello all, I am new to CSS and after reading until my retina's detached I was finally able to get a CSS only tooltip working on my site.

My problem now is that, while it "works", it wont pass validation. I am hoping there is a simple fix. I searched these forums and read all the posts involving CSS tooltip/hover etc. but none addressed the ability to provide inline formatting (it has to be inline because the color and font for each line are set programatically via PHP).

The validator says that I cant have a <p> inside an <a>. It works in both IE and Firefox on my machine but I don't want to publish a page with over 100 validation errors :-)

Again, I took the code from various tutorials I found by searching Google...I don't really understand CSS yet so I apologize in advance if the solution is "duh" simple.

Any help would be most appreciated!

-Brian

<div class='container'>
<p><a href='#' class='tt' style = 'color:$itemColor;'>[$itemName]
<span class='tooltip'>
<p style = 'color:$color; font-size:14px'>red text<br/></p>
<p style = 'color:$color;'>blue text<br/></p>
<p style = 'color:$color;'>white text<br/></p>
<p style = 'color:$color;'>green text</p>
<p style = 'color:$color;'>$enchant $socket1 $socket2</p> 
</span></a></p> 
</div>

And here is the CSS I am using

a.tt:hover{ z-index:100; color: #aaaaff; background:;}

a.tt:hover span.tooltip{
 display:block;
 position:absolute;
 top:20px; 
left:220px;
width:305px;
 text-align: left;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
border:3px double #cccccc;
 background-color:#000000;
 color:#cccccc;
 font-size:10px;
 font-style:normal;
 line-height:165%;
 padding:5px;
}

a.tt span{ display: none; }

[edited by: Wintland at 3:47 pm (utc) on Aug. 30, 2007]

[Marshall]

<p> is a parent to <a>. You may want to consider changing the <p> to <span> or, if this works, use a list.

Marshall

[Wintland]

Thanks for the response Marshall,

So, if I changed it to a list, what tag would I use to control the formatting of the individual lines? <font>?

I really appreciate the help, this is about to cause me to jump of the roof of my house...good thing my computer is in the basement.

-Brian