CSS Menu and !DOCTYPE
Sunday, October 23rd, 2011From time to time users are asking my why IE7/8/9 doesn’t show the popup menu on hover. And often the reason is bad !DOCTYPE of the html page.
For some reason IE is sensitive to these. For example, IE7 may not support the menu popup feature if your document starts with this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
And if you put the right code everything will start to work:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
In this case IE just wants to see the exact full definition for HTML 4.1 or else it doesn’t render the page as expected.
If there is no !DOCTYPE definition, add it.
If it is not the right one, replace it with the proper version.
Here are the most common:
HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
Most other modern browsers will be able to work even if the doctype isn’t in it’s full version, but IE is (as always) a special case…
