Transparent/broken HTML form validation warnings in Webkit and Firefox

In the latest versions of Chrome and Firefox, if you use the new bits of HTML forms such as validation (the ‘required’ attribute) and the ‘email’ type, there’s now some validation.

If you was to enter something that wasn’t a valid email address, or left the field empty if it was required, you’d get a nice looking tooltip notification as such:

Image removed.

But sadly, if you use some popular CSS resets such as the lovely one made by Meyer, you’ll get something that looks like this:

Image removed.

The fix is to look for code similar to this in the reset:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

And replace the div selector with body div