For unknown reasons, Visualforce does not handle an empty xmlns attribute inside a DIV tag. Unexpected behavior will result if a DIV tag is used inside a Visualforce page with xmlns="" specified as an attribute.
If a Visualforce page that contains simple HTML is not rendering like the page from which the HTML was copied, checking for empty xmlns attributes may be the key to fixing the problem.
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Friday, March 18, 2011
Tuesday, July 27, 2010
Salesforce, Internet Explorer 8 and the Missing DOCTYPE Declaration
All of my frustration with IE8 is now divided 25-75 between IE8 and Salesforce, with most of the frustration on Salesforce.
The layout scheme I described in my previous post works in all browsers except in IE8 when implemented as a Salesforce Visualforce page. Offline, I was able to reproduce the issue with the source code saved from the offending Visualforce page. Then, furthermore I was able to fix the issue by adding a simple DOCTYPE declaration at the top of the page.
The layout issues appear to be caused by the fact that Salesforce does not generate a !DOCTYPE tag at the top of the page, and IE8 just happens to assume a different !DOCTYPE than Firefox or Chrome. The !DOCTYPE that IE8 assumes must not be compatible with CSS 2.1 and HTML 4.1, the standards that I am trying to follow (although I'm probably making some mistakes along the way as well).
Regardless, Salesforce's Developerforce article "Using the Salesforce CSS in Your Apps" explicitly states (at my last viewing of the page on July 27, 2010 at 6:13 PM EDT):
Ironically, if I try to add the !DOCTYPE tag before the apex:page tag, I get the following error:
Furthermore, if I try to add the !DOCTYPE tag immediately after the apex:page tag, I get a different error:
I found a Salesforce Community thread that talked about this issue, but the resolution is ambiguous to me and does not clearly show how to get the infinitely important !DOCTYPE tag into the page. The thread "Changing doctype of a Visualforce Page" shows many people having success with getting the !DOCTYPE tag to stick, but for some reason it is still not working for me.
I'm going to log a case with Premier Support and poke around some more to see if I can't get this to work in the next 15 minutes before the lights shut off here in the office.
The layout scheme I described in my previous post works in all browsers except in IE8 when implemented as a Salesforce Visualforce page. Offline, I was able to reproduce the issue with the source code saved from the offending Visualforce page. Then, furthermore I was able to fix the issue by adding a simple DOCTYPE declaration at the top of the page.
The layout issues appear to be caused by the fact that Salesforce does not generate a !DOCTYPE tag at the top of the page, and IE8 just happens to assume a different !DOCTYPE than Firefox or Chrome. The !DOCTYPE that IE8 assumes must not be compatible with CSS 2.1 and HTML 4.1, the standards that I am trying to follow (although I'm probably making some mistakes along the way as well).
Regardless, Salesforce's Developerforce article "Using the Salesforce CSS in Your Apps" explicitly states (at my last viewing of the page on July 27, 2010 at 6:13 PM EDT):
Please ensure that you define the following DOCTYPE at the top of your HTML:<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Ironically, if I try to add the !DOCTYPE tag before the apex:page tag, I get the following error:
Error: java.lang.NullPointerException
Error: null
Furthermore, if I try to add the !DOCTYPE tag immediately after the apex:page tag, I get a different error:
Error: A DOCTYPE is not allowed in content. at line 2
I found a Salesforce Community thread that talked about this issue, but the resolution is ambiguous to me and does not clearly show how to get the infinitely important !DOCTYPE tag into the page. The thread "Changing doctype of a Visualforce Page" shows many people having success with getting the !DOCTYPE tag to stick, but for some reason it is still not working for me.
I'm going to log a case with Premier Support and poke around some more to see if I can't get this to work in the next 15 minutes before the lights shut off here in the office.
Sunday, July 25, 2010
Better Understanding of Using CSS for Page Layouts
After hours and hours of exhaustion and frustration, I've finally arrived at what I can accept as a decent implementation of a webpage with a gradient border.
The page header and page footer will stay in-position with the page, and the footer will always appear at the bottom of the screen no matter how it is resized or how much content is on the page.
The final implementation has code that looks like the following in the HTML:
Then, CSS in the background was used to do the trick to position everything correctly.
I feel like I have a much better idea of how to layout webpages now. Just learning all of the available tools (properties) is a huge challenge, which included almost 100 pages of reading on the W3C website for the CSS 2.1 specification. Whew!
The page header and page footer will stay in-position with the page, and the footer will always appear at the bottom of the screen no matter how it is resized or how much content is on the page.
The final implementation has code that looks like the following in the HTML:
<!-- Create the backdrop. -->
<div class="Backdrop">
<div class="BackdropLeft">
</div>
<div class="BackdropRight">
</div>
</div>
<!-- Create the page (containing content). -->
<div class="Page">
<div class="PageHeader">
PageHeader
</div>
<div class="PageBody">
PageBody
</div>
<div class="PageFooter">
PageFooter
</div>
</div>
Then, CSS in the background was used to do the trick to position everything correctly.
body {
background-color:#987431;
} /* body */
body>div {
width:800px;
} /* body>div */
div.Backdrop {
position:fixed;
left:0;
margin-left:auto;
margin-right:auto;
right:0;
top:0;
margin-top:0;
height:100%;
margin-bottom:0;
background-color:white;
} /* div.Backdrop */
div.Backdrop>div {
position:fixed;
width:100%;
height:100%;
} /* div.Backdrop>div */
div.BackdropLeft {
background-position:0;
background-image:url("gradient-rl-nu_black-nu_gold.jpg");
background-repeat:repeat-y;
} /* div.BackdropLeft */
div.BackdropRight {
background-position:760px;
background-image:url("gradient-lr-nu_black-nu_gold.jpg");
background-repeat:repeat-y;
} /* div.BackdropRight */
div.Page {
position:absolute;
left:0;
margin-left:auto;
margin-right:auto;
right:0;
top:0;
margin-top:0;
margin-bottom:0;
min-height:100%;
} /* div.Page */
div.Page>div {
left:0;
margin-left:auto;
width:720px;
margin-right:auto;
right:0;
} /* div.Page>div */
div.PageHeader {
position:absolute;
top:0;
margin-top:0;
height:100px;
background-color:red;
} /* div.PageHeader */
div.PageBody {
background-color:white;
padding-top:100px;
padding-bottom:100px;
} /* div.PageBody */
div.PageFooter {
position:absolute;
height:100px;
margin-bottom:0;
bottom:0px;
background-color:blue;
} /* div.PageFooter */
I feel like I have a much better idea of how to layout webpages now. Just learning all of the available tools (properties) is a huge challenge, which included almost 100 pages of reading on the W3C website for the CSS 2.1 specification. Whew!
Subscribe to:
Posts (Atom)
