<button> inside <a>

3 posts / 0 new
Last post

EPUB 3 is unhappy when <button> appears inside <a>, e.g.:

<a href="xyz.xhtml"><button>Bang</button></a>

The above XHTML works fine in IE 9.0 and Safari 5.1.2, but EPUBCHECK considers it an error not a warning.

However, if one reverses the tags to the following:

<button><a href="xyz.xhtml">Bang</a></button>

EPUBCHECK no longer complains, but both browsers now underline "Bang" [ugly] and both browsers fail to act upon button press.

Any work around?

EPUB requires content to be XHTML (XML serlalization of HTML) which is stricter about enforcing the schema than "tag soup" HTML supported by browsers. So lots of things that work in browsers will be flagged as invalid by EPUBCheck.

This is one of those things, button is not legal content inside of anchor element.

See: http://stackoverflow.com/questions/802839/button-inside-of-anchor-link-w... for more info.

The bottom line is you should be styling your link to look button-y not trying to nest (see for example the "+ ADD TO GOOGLE CHROME" "buttons" on the Google Web Store), among other things its much more accessible.

 

I'd agree with Bill that using CSS to make a "button" could certain be an option. There are some neat tools out there that help with the creation of the relevan CSS code to make buttons. A couple of sites are:

http://www.cssbuttongenerator.com/

http://css-tricks.com/examples/ButtonMaker/

Secondary menu