ASP.NET validator layout for accessibility. Need help with CSS!

I'm wondering if anyone can help me with a problem I've been scratching my head with lately. Its about accessible error messages on forms, and I've spent so long researching this without finding anything useful, or any related examples.

I've uploaded a mock page of the layout problem here. I've just made it using html in the same way that asp.net will render it. I can't upload an image because I have to build up points on this forum first so I've just linked to here for an example i've built in the same style http://hbtester.chickenkiller.com/ValidationLayoutTest.htm .

On the site I work on previously all our error messages were like the bottom red error message. A seperate with an asp.net validator in that is rendered to a . But as part of an accessibility audit we undertook I had to move all the validators into the label that is associated with each textbox/form control (after much discussion). The code looks like this

 <tr>
                <td>
                    <asp:Label ID="parentLabel" AssociatedControlID="input" runat="server">
                        <asp:Label ID="childLabel" AssociatedControlID="input" runat="server" Text="Enter number here" />
                        <asp:CustomValidator ID="errorValidator" runat="server" CssClass="error" ControlToValidate="sharesWithDrp"
                            ErrorMessage="Error message"></asp:CustomValidator>
                    </asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="input" runat="server"></asp:TextBox>
                开发者_高级运维</td>
            </tr>

(I've checked it with accessiblity validators and it passes, and a screenreader reads out the error message when in forms mode going to the offending field)

As you can see, the bottom message in the old style looks much better than the top one, and I would like it look like this. Does anyone know if this would be possible? Spent loads of time messing around with CSS with no luck.

has anyone any experience of doing this stuff in ASP.NET? It seems like it should be quite a common thing but I can't find anything. please let me know if i'm gone about this completely the wrong way!

Cheers, Buswell

The only difference i see between the two error messages on that site is that the bottom one spans across two columns in your table. If you need to have the error message box nested inside the label, the only solution i can think of is moving away from your table layout.

You can check out some alternative methods here; http://www.websiteoptimization.com/speed/tweak/forms/

When you are not constrained to table-cells it should be a small task to position error messages however you like.