embedded app rendering and XHTML DOCTYPE

I’ve been evaluating Vaadin for use in an existing web app, and in many cases I will need to embed a vaadin app into an existing jsp. I’ve been able to do that successfully using the div tag method, however I am encountering a problem with incorrect rendering. And I think I tracked down the cause, but don’t know how to fix it yet.

All of our existing jsp’s use the following doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

whereas the vaadin ones use this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If I use our existing HTML doctype, my embedded vaadin app renders incorrectly (incorrect sizing, fonts, etc.). If I switch to the XHTML doctype, then the vaadin app renders perfectly, but the rest of the page renders incorrectly.

I’m not particularly experienced in the nuances of these 2 doctypes, but I can’t quite figure out what to change. I guess I’m wondering if there is some sort of configuration option I could change to allow the Vaadin embedded app to render correctly in pages that are using the HTML doctype. Or maybe there is some kind of css tweak I could do that might fix this. Our existing app is quite a behemoth, so refactoring it to be compatible with the XHTML doctype would pretty much be out of the question. Does anybody have any ideas about this? I’m just looking for general ideas and theories, which I why I didn’t include specific screenshots or source code.