function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
lescclarkcpdlescclarkcpd 

CSS, XHTML & Changing Doc Type

Hi

 

I have a site that has been developed using xhtml & css, when I create VF pages I lose a lot of the formatting.  I'm an HTML / CSS beginner but understand that I may need to specify the doctype in the VF page.  My standard html page reads:

 

 

<!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" xml:lang="en">
<head>

 

 

When I try to replicate this in SF ie:

 

 

<apex:page showHeader="false" contentType="application/xhtml+xml">

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

 

 

I get:

 

Error

Error: A DOCTYPE is not allowed in content.

 

I have looked at other threads relating to this but there doesn't seem to be a definitive answer.  I have tried  using apex:outputText but get issues with speechmarks etc -

 

Can anyone help me out with the code ?

 

Can I use xhtml in a vf page ??

sfdcfoxsfdcfox

A doctype goes before apex:page. However, it seems that doctype is completely ignored in the current release. I'm not sure there is any way to force a DOCTYPE other than salesforce.com's default DOCTYPE to appear:

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

The source would look like this:

 

 

<!DOCTYPE html>
<apex:page>
</apex:page>

 

 
lescclarkcpdlescclarkcpd

Thanks for the info.  If only the Salesforce DOCTYPE appears what implications does this have from an HTML / CSS perspective ?  How important is DOCTYPE ie what limitations does this have from an html / css design perspective ?  Am I worrying about nothing ??

 

thanks

les
sfdcfoxsfdcfox

A doctype has unpredictable behavior across browsers. Using an "odd" type that a specific browser doesn't support will likely trigger its "quirks mode", which is a system where the browser tries to determine which browser the code was meant for, and treats elements according to the browser; this is usually meant to imply that the browser in question pretends the web developer is targetting Internet Explorer, which until recently was by far the browser with the most "quirks".

 

Contrariwise, using a doctype that follows the documented standards will cause the browser to enter "standards mode", where it tries to emulate the standards to the letter. Of course, there are still quirks, as not all browsers are "100%" compliant, even if they pass the "acid test" with 100%. However, standards mode is always preferable to quirks mode, because this means that it will look as close as possible to the web designer's intention, instead of trying to accommodate various quirks.

 

The doctype provided by salesforce.com means that any browser to encounter it will use HTML 4.01 loose, which means that mistakes are forgivable. This is preferable to strict, which causes virtually every page in the world to break; it's actually so strict, that most programmers out there violate at least one rule per page; it has only a limited subset of document elements allowed in the loose specification, which was meant to be more of a hybrid between HTML3 and earlier and HTML 4 strict mode.

 

I've been using Visualforce enough to have come across the scenario where I'd like to use HTML 5 or CSS 3 in my pages, neither of which are formally part of HTML 4. Thankfully, HTML 4 Transitional (the formal term of loose mode) is often interpreted as HTML 5 with CSS 3 in modern browsers that support HTML 5 (latest upgrades of IE, Firefox, Opera, Chrome, Konqueror, Safari, etc).

 

For example, try the following in Visualforce (requires Chrome; most other browsers won't do this yet):

 

 

<apex:page>
<input type="range" min="5" max="1000" step="5" />
</apex:page>

 

Even though we're using HTML 4.01 Transitional, you should see a slider bar, positioned half-way between each end. An input type of range is obviously part of HTML 5, but browsers will honor it as if the page were HTML 5 and not HTML 4.01.

 

Please note that some browsers may trigger quirks mode if you put HTML 5 into HTML 4 doctypes, but they should render more or less correctly.

 

CSS 3, by the same token, should also be okay in browsers that support CSS 3, even with only an HTML 4 doctype. In short, you shouldn't have anything to worry about. Just be aware you can't use XHTML, because you are in true HTML 4.01 mode, and not XHTML 1.0 mode.