So you’ve taken the time to carefully craft your Domino web site with standards compliant code, using HTML for the content and CSS for the layout.
No table or frames layout for you! You’ve properly coded your HTML so that the content is separated from the layout, and carefully crafted your CSS so that the layout is flawless, checking frequently with Firefox. You are using Firefox aren’t you?
You eagerly open your OTHER company approved browser so that you can check your layout, and discover that IE is still sucking eggs! WHAT, I thought I could use CSS? Why is IE still not working properly?
Glad you asked. You probably don’t have a proper DTD. Don’t be offended. It’s not just you. Many people move from Lotus Notes to web development thinking that Domino will handle all the web “stuff” for you. Not so.
What happens is that the DTD that Domino renders is not correct. In r8.5 it has gotten much better, but it still only renders half the information.
This is what you get with 8.5.1.
So what’s the problem? Isn’t this a proper DTD? Well, not really. Although the DTD part is correct, there is a piece missing. There should also be a URI that tells the browser where to go to verify the DTD.
Like this…
"http://www.w3.org/TR/html4/loose.dtd">
But Domino doesn’t supply that piece. Without a proper DTD IE will render the page in “Quirks” mode, so your css isn’t nearly as effective as you’d like.
To get that piece you need to do a little bit of work. There is a field that has been around since r7 that will allow you to control the output of code before the “<html>” tag, which is where the DTD is!
1. At the top of your form create a hidden, computed for display field called “$$HTMLFrontMatter”. I do this in a commonFields subform that gets embedded in all the web forms.
2. For the value of the field enter
{<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">}
OR,
{<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">}
NOTE: IE will still kick your page into Quirks mode if there is ANYTHING in front of the DTD, so make sure there is NOTHING above it.
3. Save the form, open it with a browser and view the source. You should now have a proper DTD.
Of course this doesn’t solve all of IE’s issues. There is still the box model and several others, but at least you are now rendering in the proper mode, and are no longer quirky!
Have Fun!
