From 2cc65636762ffe8a0621b769f8b671205ca4fc4e Mon Sep 17 00:00:00 2001
From: "matt%netscape.com" <matt%netscape.com>
Date: Thu, 5 Aug 1999 21:41:40 +0000
Subject: [PATCH] Adding new box prefs. fixing prefs bugs

---
 suite/common/pref/pref-advanced.xul           | 173 +++++++++---------
 suite/common/pref/pref-appearance.xul         | 105 ++++++++---
 suite/common/pref/pref-applications.xul       |  72 ++++----
 suite/common/pref/pref-cache.xul              |  89 ++++++---
 suite/common/pref/pref-colors.xul             |  92 +++++++---
 .../resources/content/pref-advanced.xul       | 173 +++++++++---------
 .../resources/content/pref-appearance.xul     | 105 ++++++++---
 .../resources/content/pref-applications.xul   |  72 ++++----
 .../resources/content/pref-cache.xul          |  89 ++++++---
 .../resources/content/pref-colors.xul         |  92 +++++++---
 .../resources/content/pref-composer.xul       | 120 ++++++++++--
 11 files changed, 779 insertions(+), 403 deletions(-)

diff --git a/suite/common/pref/pref-advanced.xul b/suite/common/pref/pref-advanced.xul
index 9d054aa41a77..6f931b5da622 100644
--- a/suite/common/pref/pref-advanced.xul
+++ b/suite/common/pref/pref-advanced.xul
@@ -1,12 +1,10 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
 <!DOCTYPE window
 [
 <!ENTITY window.title "Advanced">
-<!ENTITY advHeader "Advanced">
+<!ENTITY lHeader "Advanced">
 <!ENTITY autoLoadImgCheck.label "Automatically load images"> 
 <!ENTITY enbJavaCheck.label "Enable Java">
 <!ENTITY enbJsCheck.label "Enable JavaScript">
@@ -20,109 +18,108 @@
 <!ENTITY warnCookCheck.label "Warn me before accepting a cookie">
 <!ENTITY remSignCheck.label "Automatically prefill usernames and passwords">
 <!ENTITY capFormsCheck.label "Enable prefilling of forms">
+<!ENTITY rHeader "Changing preferences that affect the entire product">
 
 ]
-
-
 > 
 
 <window xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="return StartUp('Advanced');"  title="&window.title;">
+        onload="return StartUp('Advanced');"  align="horizontal" title="&window.title;">
 
 
-<html:script language="javascript" src="PrefsWindow.js"/>
+<html:script language="javascript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-	<html:DIV ID="top"><html:SPAN ID="lefttext">
-		&advHeader;
-		</html:SPAN>
-	</html:DIV>
 
-	
-		<html:table>		
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:advanced.always_load_images" />
-					&autoLoadImgCheck.label;					
-				</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:security.enable_java" />
+
+	<box id="header" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/>
+		  <html:div align="right">&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+
+
+	<box align="vertical" style="width: 100%;">
+			<html:fieldset style="width: 100%;">
+					<html:legend align="left">
+			<html:div></html:div> 
+			</html:legend>
+			<html:div>
+    		<html:input type="checkbox" id="pref:0:bool:advanced.always_load_images" />
+			<html:label for="pref:0:bool:advanced.always_load_images" accesskey="i" tabindex="0">
+				&autoLoadImgCheck.label;
+			</html:label>
+			</html:div>
+			<html:div>
+		    <html:input type="checkbox" id="pref:0:bool:advanced.java.allow" />
+				<html:label for="pref:0:bool:advanced.java.allow" accesskey="j" tabindex="0">
 					&enbJavaCheck.label;
-				</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-						<html:input type="checkbox" id="pref:0:bool:javascript.allow" />
-						&enbJsCheck.label;
-				</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:javascript.allow.mailnews" />
+				</html:label>
+			</html:div>
+			<html:div>
+			<html:input type="checkbox" id="pref:0:bool:javascript.allow" />
+				<html:label for="pref:0:bool:javascript.allow" accesskey="r" tabindex="0">	
+					&enbJsCheck.label;
+				</html:label>
+			</html:div>
+			<html:div>	
+			<html:input type="checkbox" id="pref:0:bool:javascript.allow.mailnews" />
+				<html:label for="pref:0:bool:javascript.allow.mailnews" accesskey="m" tabindex="0">
 					&enbJsCheck.labelforMailNNews;
-				</html:td>
-			</html:tr>
-		    <html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:css.allow" />
+				</html:label>
+			</html:div>
+			<html:div>
+			<html:input type="checkbox" id="pref:0:bool:css.allow" />
+				<html:label for="pref:0:bool:css.allow" accesskey="s" tabindex="0">
 					&enbCssCheck.label;
-			</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:advanced.mailftp" />
+				</html:label>
+			</html:div>
+			<html:div>
+			<html:input type="checkbox" id="pref:0:bool:advanced.mailftp" />
+				<html:label for="pref:0:bool:advanced.mailftp" accesskey="e" tabindex="0">
 					&sendAddFtpCheck.label;
-				</html:td>
-			</html:tr>
-			
+				</html:label>
+			</html:div>
+				
+	</html:fieldset>
+	</box>
 
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:signon.rememberSignons" />
-					&remSignCheck.label;
-			</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" checked="true" id="pref:0:bool:wallet.captureForms" />
-					&capFormsCheck.label;
-				</html:td>
-			</html:tr>
 
-		</html:table>
-	
-	    &cookies;
-		<html:table>
-			<html:tr>
-				<html:td>
-					<html:input name="cookies" type="radio" id="pref:0:int:network.cookie.cookieBehavior" sel="checked" />
-					&accAllCookiesRadio.label;
-				</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input name="cookies" type="radio" id="pref:1:int:network.cookie.cookieBehavior" />
-					&accpOrgCookiesRadio.label;
-			</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input name="cookies" type="radio" id="pref:2:int:network.cookie.cookieBehavior" />
+	<box align="vertical" style="width: 100%;">
+	<html:fieldset width="100%">
+			<html:legend align="left">
+				 <html:div>&cookies;</html:div> 
+			</html:legend>
+			<html:div>
+    	    <html:input name="cookies" type="radio" id="pref:0:int:network.cookie.cookieBehavior"  />
+			<html:label for="pref:2:int:network.cookie.cookieBehavior" accesskey="a" tabindex="0">
+			   &accAllCookiesRadio.label;
+			</html:label>
+			</html:div>
+			<html:div>
+		    <html:input type="radio" name="cookies" id="pref:1:int:network.cookie.cookieBehavior" />
+			<html:label for="pref:0:int:network.cookie.cookieBehavior" accesskey="o" tabindex="0">
+			   &accpOrgCookiesRadio.label;
+			</html:label>
+			</html:div>
+			<html:div>
+			<html:input type="radio" name="cookies" id="pref:2:int:network.cookie.cookieBehavior" />
+				<html:label for="pref:1:int:network.cookie.cookieBehavior" accesskey="d" tabindex="0">	
 					&disCookRadio.label;
-				</html:td>
-			</html:tr>
-		    <html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:network.cookie.warnAboutCookies" />
+				</html:label>
+			</html:div>
+			<html:div>	
+			<html:input type="checkbox" id="pref:0:bool:network.cookie.warnAboutCookies" />
+				<html:label for="pref:0:bool:network.cookie.warnAboutCookies" accesskey="w" tabindex="0">
 					&warnCookCheck.label;
-				</html:td>
-				</html:tr>
+				</html:label>
+			</html:div>
+				
+	</html:fieldset>
+	</box>
 
-
-
-		</html:table>
-	
 </html:div>
 </window>
diff --git a/suite/common/pref/pref-appearance.xul b/suite/common/pref/pref-appearance.xul
index 4cdbda74b9e3..f8fec4573526 100644
--- a/suite/common/pref/pref-appearance.xul
+++ b/suite/common/pref/pref-appearance.xul
@@ -1,11 +1,11 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
 <!DOCTYPE window
 [
 <!ENTITY window.title "Appearance">
+<!ENTITY lHeader "Appearance">
+<!ENTITY rHeader "Change the appearance of the display">
 <!ENTITY onStartLegend.label "On startup, launch">
 <!ENTITY appear "Appearance">
 <!ENTITY navCheck.label "Navigator">
@@ -18,34 +18,89 @@
 <!ENTITY textonlyRadio.label "Text Only">
 ]>
 
-<xul:window  xmlns:html="http://www.w3.org/TR/REC-html40"
+<window  xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 		onload="StartUp('Appearance')" >
 
-<html:script language="javascript" src="PrefsWindow.js"/>
+
+
+<html:script language="javascript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-	<html:DIV ID="top">
-		<html:SPAN ID="lefttext">&appear;</html:SPAN>
-	</html:DIV>
 
-	&onStartLegend.label;
-	<html:form>
-		<html:table>		
-			<html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:general.startup.browser" />&navCheck.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:general.startup.mail" />&mesCheck.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:general.startup.editor" />&compCheck.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:general.startup.calendar" />&calCheck.label;</html:label></html:td></html:tr>
-			</html:table>
+ 
+  	<box id="header" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/><spring style="width:60px"/>
+		  <html:div >&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+
+<html:form>
+	<box align="vertical" style="width: 100%;">
+		<html:fieldset style="width: 100%;">
+			<html:legend align="left">
+			<html:div>&onStartLegend.label;</html:div> 
+			</html:legend>
+						<html:div>
+				<html:input type="checkbox" id="pref:0:bool:general.startup.browser" />
+				<html:label for="pref:0:bool:general.startup.browser" accesskey="n" tabindex="0">
+				&navCheck.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input type="checkbox" id="pref:0:bool:general.startup.mail" />
+				<html:label for="pref:0:bool:general.startup.mail" accesskey="m" tabindex="0">
+				&mesCheck.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input type="checkbox" id="pref:0:bool:general.startup.editor" />
+				<html:label for="pref:0:bool:general.startup.editor" accesskey="c" tabindex="0">
+				&compCheck.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input type="checkbox" id="ref:0:bool:general.startup.calendar" />
+				<html:label for="ref:0:bool:general.startup.calendar" accesskey="a" tabindex="0">
+				&compCheck.label;
+				</html:label>
+			</html:div>
+		
+		</html:fieldset>
+	</box>
+</html:form>
+
+
+<html:form>
+<box align="vertical" style="width: 100%;">
+		<html:fieldset style="width: 100%;">
+			<html:legend align="left">
+			<html:div>&showToolsLegend.label;</html:div> 
+			</html:legend>
+			<html:div>
+				<html:input name="showtoolbar" type="radio" id="pref:2:int:browser.chrome.toolbar_style" />
+				<html:label for="pref:2:int:browser.chrome.toolbar_style" accesskey="p" tabindex="0">
+				&picsNtextRadio.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input name="showtoolbar" type="radio" id="pref:0:int:browser.chrome.toolbar_style" />
+				<html:label for="pref:0:int:browser.chrome.toolbar_style" accesskey="o" tabindex="0">
+				&picsOnlyRadio.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input name="showtoolbar" type="radio" id="pref:1:int:browser.chrome.toolbar_style" />
+				<html:label for="pref:1:int:browser.chrome.toolbar_style" accesskey="t" tabindex="0">
+				&textonlyRadio.label;
+				</html:label>
+			</html:div>
+			
+		</html:fieldset>
+	</box>
 	</html:form>
 
-	&showToolsLegend.label;
-
-	<html:form>
-		<html:table>
-			<html:tr><html:td><html:label><html:input name="showtoolbar" type="radio" id="pref:2:int:browser.chrome.toolbar_style" />&picsNtextRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input name="showtoolbar" type="radio" id="pref:0:int:browser.chrome.toolbar_style" />&picsOnlyRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input name="showtoolbar" type="radio" id="pref:1:int:browser.chrome.toolbar_style" />&textonlyRadio.label;</html:label></html:td></html:tr>
-		</html:table>
-	</html:form>
 </html:div>
-</xul:window>
+</window>
diff --git a/suite/common/pref/pref-applications.xul b/suite/common/pref/pref-applications.xul
index bbc0950477e1..7cf717fdca26 100644
--- a/suite/common/pref/pref-applications.xul
+++ b/suite/common/pref/pref-applications.xul
@@ -1,12 +1,10 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
-
 <!DOCTYPE window
 [
 <!ENTITY window.title "Advanced">
-<!ENTITY appsHeader "Applications">
+<!ENTITY lHeader "Applications">
+<!ENTITY rHeader "Specify helper applications for different file types">
 <!ENTITY descript "Description">
 <!ENTITY aimLaunchSelect.label "AOL Instant Messenger Launch">
 <!ENTITY newTypeButton.label "New Type">
@@ -23,38 +21,48 @@
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         onload="return StartUp('Applications');"  title="&window.title;">
 
-<html:script language="javascript" src="PrefsWindow.js"/>
+<html:script language="javascript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-<html:DIV ID="top">
-		<html:SPAN ID="lefttext">&appsHeader;</html:SPAN>
-</html:DIV>
-
-<html:form>
-	<html:table>  
-			<html:tr><html:td>&descript;</html:td></html:tr>
-			<html:tr><html:td>
-			   <html:select name="textstyle" size="5" >
-				 <html:optgroup>
+  
+  	<box id="header" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/><spring style="width:60px"/>
+		  <html:div >&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+    <html:form>
+  <box align="horizontal" style="width: 100%;">
+			<box align="vertical" style="width: 100%;">
+			&descript;
+			<html:select name="textstyle" size="5" >
+				<html:optgroup>
 			    <html:option value="0" />
 				&aimLaunchSelect.label;
 				</html:optgroup>
 				</html:select> 
-			</html:td>
-			<html:td>
-			   <html:input name="choose" type="button" value="&newTypeButton.label;" />
-				 <html:br /><html:input name="choose" type="button" value="&editButton.label;" />
-         <html:br /><html:input name="choose" type="button" value="&removeButton.label;" />
-         </html:td></html:tr>
-	</html:table>
-</html:form>
-<html:br />
-<html:form>
-<html:table>
-			<html:tr><html:td>&file;</html:td></html:tr>
-			<html:tr><html:td>&exten;</html:td></html:tr>
-			<html:tr><html:td>&mimeType;</html:td></html:tr>
-			<html:tr><html:td>&handle;</html:td></html:tr>
-</html:table>
-</html:form>
+			</box>
+	<box align="vertical">
+
+		<titledbutton id="newTypeButton" value="&newTypeButton.label;" />
+		<titledbutton id="editButton" value="&editButton.label;" />
+		<titledbutton id="removeButton" value="&removeButton.label;" />
+
+	</box>
+  </box>
+ </html:form>
+
+<box align="vertical" style="width: 100%;">
+		<html:fieldset style="width: 100%;">
+			<html:legend align="left">
+				<html:div>&file;</html:div> 
+			</html:legend>
+			<html:div>&exten;</html:div>
+			<html:div>&mimeType;</html:div>
+			<html:div>&handle;</html:div>
+		</html:fieldset>
+</box>
+
 </html:div>
 </xul:window>
diff --git a/suite/common/pref/pref-cache.xul b/suite/common/pref/pref-cache.xul
index b9620923aa33..de7f2feee581 100644
--- a/suite/common/pref/pref-cache.xul
+++ b/suite/common/pref/pref-cache.xul
@@ -1,15 +1,18 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
-<!DOCTYPE window [
+<!DOCTYPE window 
+[
 <!ENTITY  title.label "Cache">
-<!ENTITY  cacheHeader "Cache">
+<!ENTITY  lHeader "Cache">
+<!ENTITY  rHeader "Designate the size of the cache">
 <!ENTITY cachePara "The cache is used to keep local copies of frequently accessed documents
 	  and thus reduce time connected to the network. The Reload button will always
 	  compare the cache document to the network and show the most recent one.">
 <!ENTITY memCache "Memory Cache:">
+<!ENTITY diskCache "Disk Cache:">
 <!ENTITY kbyes "KBytes">
+<!ENTITY diskCacheFolder "Disk Cache Folder:">
 <!ENTITY clearMemcacheButton.label "Clear Memory Cache">
 <!ENTITY clearDiskcacheButton.label "Clear Disk Cache">
 <!ENTITY docCache "Document in cache is compared to document on network:">
@@ -20,29 +23,73 @@
 
 <window xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="return StartUp('Cache');"  title="&title.label;">
+        onload="return StartUp('Cache');"  align="vertical" title="&title.label;">
 
-<html:script language="javascript" src="PrefsWindow.js"/>
+<html:script language="javascript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-<html:DIV ID="top">
-		<html:SPAN ID="lefttext">&cacheHeader;</html:SPAN>
-</html:DIV>
 
+	<box id="header" style="width:100%" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/>
+		  <html:div align="right">&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+ 	<box align="vertical" style="width: 100%;">
+	<!--	<html:fieldset style="width: 100%;">  
+			<html:legend align="left">>
+				<html:div></html:div>
+			</html:legend> -->
+	
+		<html:div>&cachePara;</html:div><spring flex="100%"/>
+		<html:div></html:div>
+		<box align="horizontal" style="width: 100%;"> 
+			<html:div>&memCache;</html:div>
+			<spring style="width:5px"/>
+			<html:input name="disk" type="text" size="3" id="pref:string:browser.cache.memory_cache_size" />
+			<html:div>&kbyes;</html:div>
+			<titledbutton name="clearm" value="&clearMemcacheButton.label;" />
+		</box> 
+		<box align="horizontal" style="width: 100%;"> 
+			<html:div>&diskCache;</html:div>
+			<spring style="width:5px"/>
+			<html:input name="disk" type="text" size="3" id="pref:string:browser.cache.disk_cache_size" />
+			<html:div>&kbyes;</html:div>
+			<titledbutton name="clearm" value="&clearDiskcacheButton.label;" />
+		</box>
+		<box align="horizontal" style="width: 100%;"> 
+			<html:div>&diskCacheFolder;</html:div>
+			<html:input name="disk" type="text" size="20" id="pref:string:browser.cache.directory" />
+			<html:div>
+				<titledbutton value="Choose File..." align="left"/>
+			</html:div>
+		</box>
 
-<html:table>
-      <html:tr><html:td>&cachePara;
-	  </html:td></html:tr>  
-            <html:tr><html:td>&memCache;<html:input name="disk" type="text" size="3" id="pref:string:composer.source" />&kbyes;<html:input name="clearm" type="button" value="&clearMemcacheButton.label;" /></html:td></html:tr>           
-			<html:tr><html:td>Disk Cache:<html:input name="memory" type="text" size="3" id="pref:string:composer.source" />&kbyes;<html:input name="cleard" type="button" value="&clearDiskcacheButton.label;" /></html:td></html:tr> 
-</html:table>
+	</box>
 
-
-<html:table> 
-       &docCache;			
-			<html:tr><html:td><html:label><html:input type="radio" name="cache" id="pref:0:int:composer.font.size" />&oncePsessionRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="radio" name="cache" id="pref:1:int:composer.font.size" />&everyTimeRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="radio" name="cache" id="pref:2:int:composer.font.size" />&neverRadio.label;</html:label></html:td></html:tr>
-</html:table>
+	<box align="vertical" style="width: 100%;">
+				<html:div>&docCache;</html:div>
+		<html:div>
+    		<html:input type="radio" name="cache" id="pref:0:browser.cache.check_doc_frequency" checked="true"/>
+			<html:label for="pref:0:browser.cache.check_doc_frequency" accesskey="o" tabindex="0">
+			&oncePsessionRadio.label;
+			</html:label>
+		</html:div>
+		<html:div>
+    		<html:input type="radio" name="cache" id="pref:1:browser.cache.check_doc_frequency" />
+			<html:label for="pref:1:browser.cache.check_doc_frequency" accesskey="e" tabindex="0">
+			&everyTimeRadio.label;	
+			</html:label>
+		</html:div>
+    	<html:div>
+    		<html:input type="radio" name="cache" id="pref:2:browser.cache.check_doc_frequency" />
+			<html:label for="pref:2:browser.cache.check_doc_frequency" accesskey="n" tabindex="0">
+			&neverRadio.label;	
+			</html:label>
+		</html:div>	
+	</box>
+	<!--	</html:fieldset> -->
 </html:div>
 </window>
 
diff --git a/suite/common/pref/pref-colors.xul b/suite/common/pref/pref-colors.xul
index 4559dc7be38e..fa68b6c91672 100644
--- a/suite/common/pref/pref-colors.xul
+++ b/suite/common/pref/pref-colors.xul
@@ -1,12 +1,12 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
 <!DOCTYPE window
 [
 <!ENTITY  window.title "Colors">
-<!ENTITY  colorsHeader "Colors">
+<!ENTITY  lHeader "Colors">
+<!ENTITY  rHeader "Change the colors in your display">
+<!ENTITY  color "Colors">
 <!ENTITY  text "Text:">
 <!ENTITY  colorPick "Color Picker">
 <!ENTITY  background "Background:">
@@ -16,40 +16,74 @@
 <!ENTITY  unvisit "Unvisited Links:">
 <!ENTITY  visit "Visited Links:">
 <!ENTITY  someProvColors "Sometimes a document will provide its own colors and background.">
-<!ENTITY  alwaysOverCheck.label "Always use my colors, overriding documents.">
+<!ENTITY  alwaysOverCheck.label "Always use my colors, overriding documents">
 ]> 
 
 <xul:window xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="StartUp('Colors')"  title="&window.title;">
+        onload="StartUp('Colors')"  title="&window.title;" align="vertical">
 
-<html:script language="JavaScript" src="PrefsWindow.js"/>
+<html:script language="JavaScript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-	<html:div ID="top">
-		<html:span ID="lefttext">
-			&colorsHeader;
-		</html:span>
-	</html:div>
 
-   <html:table>
-		<html:tr><html:td>&text;</html:td><html:td>&text;</html:td></html:tr>
-		<html:tr><html:td>&background;</html:td><html:td>&colorPick;</html:td></html:tr>
-		<html:tr><html:td><html:label><html:input  type="checkbox" id="pref:0:bool:browser.wfe.use_windows_colors" val="checked" />&useWinColorsCheck.label;</html:label></html:td></html:tr>
-   </html:table>
+	<box id="header" style="width:100%" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/>
+		  <html:div>&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+  <box flex="100%" align="horizontal" style="width: 100%;">
+	<box align="vertical" flex="50%" style="width: 50%;">
+		<html:fieldset style="width: 50%;">
+					<html:legend align="left"> 
+			<html:div>&color;</html:div> 
+					</html:legend> 
+			<html:div>&text;<spring flex="50%"/>&colorPick;</html:div>
+			<html:div>&background;<spring flex="50%"/>&colorPick;</html:div>
+			<html:div>
+				<html:input  type="checkbox" id="pref:0:bool:browser.wfe.use_windows_colors" val="checked" />
+			<html:label for="pref:0:bool:browser.wfe.use_windows_colors" accesskey="w" tabindex="0">
+				&useWinColorsCheck.label;
+			</html:label>
+			</html:div> 
+	    	</html:fieldset>
+	</box>  
+	<spring style="width:10px"/>
+	<box align="horizontal" flex="50%" style="width: 50%;">
+			<html:fieldset style="width: 50%;">
+					<html:legend align="left">
+			<html:div>&links;</html:div> 
+					</html:legend>
+			<html:div>&unvisit;<spring flex="50%"/>&colorPick;</html:div>
+			<html:div>&visit;<spring flex="50%"/>&colorPick;</html:div>
+			<html:div><html:input  type="checkbox" id="pref:0:bool:browser.underline_anchors" val="checked" />		
+				<html:label for="pref:0:bool:browser.underline_anchors" accesskey="u" tabindex="0">				
+				&underLinksCheck.label;
+				</html:label>
+			
+			</html:div>		
+		</html:fieldset>
+	</box>  
+  </box>
 
-<html:table>
-&links;
-		<html:tr><html:td>&unvisit;</html:td><html:td>&colorPick;</html:td></html:tr>
-		<html:tr><html:td>&visit;</html:td><html:td>&colorPick;</html:td></html:tr>
-		<html:tr><html:td><html:label><html:input  type="checkbox" id="pref:0:bool:browser.underline_anchors" val="checked" />&underLinksCheck.label;</html:label></html:td></html:tr>
-</html:table>
-
-<html:br/>
-
-<html:table>
-   <html:tr><html:td>&someProvColors;</html:td></html:tr>
-   <html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:browser.use_document_" />&alwaysOverCheck.label;</html:label></html:td></html:tr>
-</html:table>
+	<box align="horizontal" flex="100%" style="width: 100%;">
+			<html:fieldset style="width: 100%;">
+					<html:legend align="left">
+			<html:div></html:div> 
+					</html:legend>
+			<html:div>
+				&someProvColors;
+			</html:div>
+			<html:div>
+				<html:input type="checkbox" id="pref:0:bool:browser.use_document_colors" />
+				<html:label for="pref:0:bool:browser.use_document_colors" accesskey="a" tabindex="0">
+				&alwaysOverCheck.label;
+			</html:label>
+			</html:div>		
+		</html:fieldset>
+	</box>
 
 </html:div>
 </xul:window>
diff --git a/xpfe/components/prefwindow/resources/content/pref-advanced.xul b/xpfe/components/prefwindow/resources/content/pref-advanced.xul
index 9d054aa41a77..6f931b5da622 100644
--- a/xpfe/components/prefwindow/resources/content/pref-advanced.xul
+++ b/xpfe/components/prefwindow/resources/content/pref-advanced.xul
@@ -1,12 +1,10 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
 <!DOCTYPE window
 [
 <!ENTITY window.title "Advanced">
-<!ENTITY advHeader "Advanced">
+<!ENTITY lHeader "Advanced">
 <!ENTITY autoLoadImgCheck.label "Automatically load images"> 
 <!ENTITY enbJavaCheck.label "Enable Java">
 <!ENTITY enbJsCheck.label "Enable JavaScript">
@@ -20,109 +18,108 @@
 <!ENTITY warnCookCheck.label "Warn me before accepting a cookie">
 <!ENTITY remSignCheck.label "Automatically prefill usernames and passwords">
 <!ENTITY capFormsCheck.label "Enable prefilling of forms">
+<!ENTITY rHeader "Changing preferences that affect the entire product">
 
 ]
-
-
 > 
 
 <window xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="return StartUp('Advanced');"  title="&window.title;">
+        onload="return StartUp('Advanced');"  align="horizontal" title="&window.title;">
 
 
-<html:script language="javascript" src="PrefsWindow.js"/>
+<html:script language="javascript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-	<html:DIV ID="top"><html:SPAN ID="lefttext">
-		&advHeader;
-		</html:SPAN>
-	</html:DIV>
 
-	
-		<html:table>		
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:advanced.always_load_images" />
-					&autoLoadImgCheck.label;					
-				</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:security.enable_java" />
+
+	<box id="header" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/>
+		  <html:div align="right">&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+
+
+	<box align="vertical" style="width: 100%;">
+			<html:fieldset style="width: 100%;">
+					<html:legend align="left">
+			<html:div></html:div> 
+			</html:legend>
+			<html:div>
+    		<html:input type="checkbox" id="pref:0:bool:advanced.always_load_images" />
+			<html:label for="pref:0:bool:advanced.always_load_images" accesskey="i" tabindex="0">
+				&autoLoadImgCheck.label;
+			</html:label>
+			</html:div>
+			<html:div>
+		    <html:input type="checkbox" id="pref:0:bool:advanced.java.allow" />
+				<html:label for="pref:0:bool:advanced.java.allow" accesskey="j" tabindex="0">
 					&enbJavaCheck.label;
-				</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-						<html:input type="checkbox" id="pref:0:bool:javascript.allow" />
-						&enbJsCheck.label;
-				</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:javascript.allow.mailnews" />
+				</html:label>
+			</html:div>
+			<html:div>
+			<html:input type="checkbox" id="pref:0:bool:javascript.allow" />
+				<html:label for="pref:0:bool:javascript.allow" accesskey="r" tabindex="0">	
+					&enbJsCheck.label;
+				</html:label>
+			</html:div>
+			<html:div>	
+			<html:input type="checkbox" id="pref:0:bool:javascript.allow.mailnews" />
+				<html:label for="pref:0:bool:javascript.allow.mailnews" accesskey="m" tabindex="0">
 					&enbJsCheck.labelforMailNNews;
-				</html:td>
-			</html:tr>
-		    <html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:css.allow" />
+				</html:label>
+			</html:div>
+			<html:div>
+			<html:input type="checkbox" id="pref:0:bool:css.allow" />
+				<html:label for="pref:0:bool:css.allow" accesskey="s" tabindex="0">
 					&enbCssCheck.label;
-			</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:advanced.mailftp" />
+				</html:label>
+			</html:div>
+			<html:div>
+			<html:input type="checkbox" id="pref:0:bool:advanced.mailftp" />
+				<html:label for="pref:0:bool:advanced.mailftp" accesskey="e" tabindex="0">
 					&sendAddFtpCheck.label;
-				</html:td>
-			</html:tr>
-			
+				</html:label>
+			</html:div>
+				
+	</html:fieldset>
+	</box>
 
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:signon.rememberSignons" />
-					&remSignCheck.label;
-			</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input type="checkbox" checked="true" id="pref:0:bool:wallet.captureForms" />
-					&capFormsCheck.label;
-				</html:td>
-			</html:tr>
 
-		</html:table>
-	
-	    &cookies;
-		<html:table>
-			<html:tr>
-				<html:td>
-					<html:input name="cookies" type="radio" id="pref:0:int:network.cookie.cookieBehavior" sel="checked" />
-					&accAllCookiesRadio.label;
-				</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input name="cookies" type="radio" id="pref:1:int:network.cookie.cookieBehavior" />
-					&accpOrgCookiesRadio.label;
-			</html:td>
-			</html:tr>
-			<html:tr>
-				<html:td>
-					<html:input name="cookies" type="radio" id="pref:2:int:network.cookie.cookieBehavior" />
+	<box align="vertical" style="width: 100%;">
+	<html:fieldset width="100%">
+			<html:legend align="left">
+				 <html:div>&cookies;</html:div> 
+			</html:legend>
+			<html:div>
+    	    <html:input name="cookies" type="radio" id="pref:0:int:network.cookie.cookieBehavior"  />
+			<html:label for="pref:2:int:network.cookie.cookieBehavior" accesskey="a" tabindex="0">
+			   &accAllCookiesRadio.label;
+			</html:label>
+			</html:div>
+			<html:div>
+		    <html:input type="radio" name="cookies" id="pref:1:int:network.cookie.cookieBehavior" />
+			<html:label for="pref:0:int:network.cookie.cookieBehavior" accesskey="o" tabindex="0">
+			   &accpOrgCookiesRadio.label;
+			</html:label>
+			</html:div>
+			<html:div>
+			<html:input type="radio" name="cookies" id="pref:2:int:network.cookie.cookieBehavior" />
+				<html:label for="pref:1:int:network.cookie.cookieBehavior" accesskey="d" tabindex="0">	
 					&disCookRadio.label;
-				</html:td>
-			</html:tr>
-		    <html:tr>
-				<html:td>
-					<html:input type="checkbox" id="pref:0:bool:network.cookie.warnAboutCookies" />
+				</html:label>
+			</html:div>
+			<html:div>	
+			<html:input type="checkbox" id="pref:0:bool:network.cookie.warnAboutCookies" />
+				<html:label for="pref:0:bool:network.cookie.warnAboutCookies" accesskey="w" tabindex="0">
 					&warnCookCheck.label;
-				</html:td>
-				</html:tr>
+				</html:label>
+			</html:div>
+				
+	</html:fieldset>
+	</box>
 
-
-
-		</html:table>
-	
 </html:div>
 </window>
diff --git a/xpfe/components/prefwindow/resources/content/pref-appearance.xul b/xpfe/components/prefwindow/resources/content/pref-appearance.xul
index 4cdbda74b9e3..f8fec4573526 100644
--- a/xpfe/components/prefwindow/resources/content/pref-appearance.xul
+++ b/xpfe/components/prefwindow/resources/content/pref-appearance.xul
@@ -1,11 +1,11 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
 <!DOCTYPE window
 [
 <!ENTITY window.title "Appearance">
+<!ENTITY lHeader "Appearance">
+<!ENTITY rHeader "Change the appearance of the display">
 <!ENTITY onStartLegend.label "On startup, launch">
 <!ENTITY appear "Appearance">
 <!ENTITY navCheck.label "Navigator">
@@ -18,34 +18,89 @@
 <!ENTITY textonlyRadio.label "Text Only">
 ]>
 
-<xul:window  xmlns:html="http://www.w3.org/TR/REC-html40"
+<window  xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 		onload="StartUp('Appearance')" >
 
-<html:script language="javascript" src="PrefsWindow.js"/>
+
+
+<html:script language="javascript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-	<html:DIV ID="top">
-		<html:SPAN ID="lefttext">&appear;</html:SPAN>
-	</html:DIV>
 
-	&onStartLegend.label;
-	<html:form>
-		<html:table>		
-			<html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:general.startup.browser" />&navCheck.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:general.startup.mail" />&mesCheck.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:general.startup.editor" />&compCheck.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:general.startup.calendar" />&calCheck.label;</html:label></html:td></html:tr>
-			</html:table>
+ 
+  	<box id="header" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/><spring style="width:60px"/>
+		  <html:div >&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+
+<html:form>
+	<box align="vertical" style="width: 100%;">
+		<html:fieldset style="width: 100%;">
+			<html:legend align="left">
+			<html:div>&onStartLegend.label;</html:div> 
+			</html:legend>
+						<html:div>
+				<html:input type="checkbox" id="pref:0:bool:general.startup.browser" />
+				<html:label for="pref:0:bool:general.startup.browser" accesskey="n" tabindex="0">
+				&navCheck.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input type="checkbox" id="pref:0:bool:general.startup.mail" />
+				<html:label for="pref:0:bool:general.startup.mail" accesskey="m" tabindex="0">
+				&mesCheck.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input type="checkbox" id="pref:0:bool:general.startup.editor" />
+				<html:label for="pref:0:bool:general.startup.editor" accesskey="c" tabindex="0">
+				&compCheck.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input type="checkbox" id="ref:0:bool:general.startup.calendar" />
+				<html:label for="ref:0:bool:general.startup.calendar" accesskey="a" tabindex="0">
+				&compCheck.label;
+				</html:label>
+			</html:div>
+		
+		</html:fieldset>
+	</box>
+</html:form>
+
+
+<html:form>
+<box align="vertical" style="width: 100%;">
+		<html:fieldset style="width: 100%;">
+			<html:legend align="left">
+			<html:div>&showToolsLegend.label;</html:div> 
+			</html:legend>
+			<html:div>
+				<html:input name="showtoolbar" type="radio" id="pref:2:int:browser.chrome.toolbar_style" />
+				<html:label for="pref:2:int:browser.chrome.toolbar_style" accesskey="p" tabindex="0">
+				&picsNtextRadio.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input name="showtoolbar" type="radio" id="pref:0:int:browser.chrome.toolbar_style" />
+				<html:label for="pref:0:int:browser.chrome.toolbar_style" accesskey="o" tabindex="0">
+				&picsOnlyRadio.label;
+				</html:label>
+			</html:div>
+			<html:div>
+				<html:input name="showtoolbar" type="radio" id="pref:1:int:browser.chrome.toolbar_style" />
+				<html:label for="pref:1:int:browser.chrome.toolbar_style" accesskey="t" tabindex="0">
+				&textonlyRadio.label;
+				</html:label>
+			</html:div>
+			
+		</html:fieldset>
+	</box>
 	</html:form>
 
-	&showToolsLegend.label;
-
-	<html:form>
-		<html:table>
-			<html:tr><html:td><html:label><html:input name="showtoolbar" type="radio" id="pref:2:int:browser.chrome.toolbar_style" />&picsNtextRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input name="showtoolbar" type="radio" id="pref:0:int:browser.chrome.toolbar_style" />&picsOnlyRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input name="showtoolbar" type="radio" id="pref:1:int:browser.chrome.toolbar_style" />&textonlyRadio.label;</html:label></html:td></html:tr>
-		</html:table>
-	</html:form>
 </html:div>
-</xul:window>
+</window>
diff --git a/xpfe/components/prefwindow/resources/content/pref-applications.xul b/xpfe/components/prefwindow/resources/content/pref-applications.xul
index bbc0950477e1..7cf717fdca26 100644
--- a/xpfe/components/prefwindow/resources/content/pref-applications.xul
+++ b/xpfe/components/prefwindow/resources/content/pref-applications.xul
@@ -1,12 +1,10 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
-
 <!DOCTYPE window
 [
 <!ENTITY window.title "Advanced">
-<!ENTITY appsHeader "Applications">
+<!ENTITY lHeader "Applications">
+<!ENTITY rHeader "Specify helper applications for different file types">
 <!ENTITY descript "Description">
 <!ENTITY aimLaunchSelect.label "AOL Instant Messenger Launch">
 <!ENTITY newTypeButton.label "New Type">
@@ -23,38 +21,48 @@
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         onload="return StartUp('Applications');"  title="&window.title;">
 
-<html:script language="javascript" src="PrefsWindow.js"/>
+<html:script language="javascript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-<html:DIV ID="top">
-		<html:SPAN ID="lefttext">&appsHeader;</html:SPAN>
-</html:DIV>
-
-<html:form>
-	<html:table>  
-			<html:tr><html:td>&descript;</html:td></html:tr>
-			<html:tr><html:td>
-			   <html:select name="textstyle" size="5" >
-				 <html:optgroup>
+  
+  	<box id="header" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/><spring style="width:60px"/>
+		  <html:div >&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+    <html:form>
+  <box align="horizontal" style="width: 100%;">
+			<box align="vertical" style="width: 100%;">
+			&descript;
+			<html:select name="textstyle" size="5" >
+				<html:optgroup>
 			    <html:option value="0" />
 				&aimLaunchSelect.label;
 				</html:optgroup>
 				</html:select> 
-			</html:td>
-			<html:td>
-			   <html:input name="choose" type="button" value="&newTypeButton.label;" />
-				 <html:br /><html:input name="choose" type="button" value="&editButton.label;" />
-         <html:br /><html:input name="choose" type="button" value="&removeButton.label;" />
-         </html:td></html:tr>
-	</html:table>
-</html:form>
-<html:br />
-<html:form>
-<html:table>
-			<html:tr><html:td>&file;</html:td></html:tr>
-			<html:tr><html:td>&exten;</html:td></html:tr>
-			<html:tr><html:td>&mimeType;</html:td></html:tr>
-			<html:tr><html:td>&handle;</html:td></html:tr>
-</html:table>
-</html:form>
+			</box>
+	<box align="vertical">
+
+		<titledbutton id="newTypeButton" value="&newTypeButton.label;" />
+		<titledbutton id="editButton" value="&editButton.label;" />
+		<titledbutton id="removeButton" value="&removeButton.label;" />
+
+	</box>
+  </box>
+ </html:form>
+
+<box align="vertical" style="width: 100%;">
+		<html:fieldset style="width: 100%;">
+			<html:legend align="left">
+				<html:div>&file;</html:div> 
+			</html:legend>
+			<html:div>&exten;</html:div>
+			<html:div>&mimeType;</html:div>
+			<html:div>&handle;</html:div>
+		</html:fieldset>
+</box>
+
 </html:div>
 </xul:window>
diff --git a/xpfe/components/prefwindow/resources/content/pref-cache.xul b/xpfe/components/prefwindow/resources/content/pref-cache.xul
index b9620923aa33..de7f2feee581 100644
--- a/xpfe/components/prefwindow/resources/content/pref-cache.xul
+++ b/xpfe/components/prefwindow/resources/content/pref-cache.xul
@@ -1,15 +1,18 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
-<!DOCTYPE window [
+<!DOCTYPE window 
+[
 <!ENTITY  title.label "Cache">
-<!ENTITY  cacheHeader "Cache">
+<!ENTITY  lHeader "Cache">
+<!ENTITY  rHeader "Designate the size of the cache">
 <!ENTITY cachePara "The cache is used to keep local copies of frequently accessed documents
 	  and thus reduce time connected to the network. The Reload button will always
 	  compare the cache document to the network and show the most recent one.">
 <!ENTITY memCache "Memory Cache:">
+<!ENTITY diskCache "Disk Cache:">
 <!ENTITY kbyes "KBytes">
+<!ENTITY diskCacheFolder "Disk Cache Folder:">
 <!ENTITY clearMemcacheButton.label "Clear Memory Cache">
 <!ENTITY clearDiskcacheButton.label "Clear Disk Cache">
 <!ENTITY docCache "Document in cache is compared to document on network:">
@@ -20,29 +23,73 @@
 
 <window xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="return StartUp('Cache');"  title="&title.label;">
+        onload="return StartUp('Cache');"  align="vertical" title="&title.label;">
 
-<html:script language="javascript" src="PrefsWindow.js"/>
+<html:script language="javascript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-<html:DIV ID="top">
-		<html:SPAN ID="lefttext">&cacheHeader;</html:SPAN>
-</html:DIV>
 
+	<box id="header" style="width:100%" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/>
+		  <html:div align="right">&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+ 	<box align="vertical" style="width: 100%;">
+	<!--	<html:fieldset style="width: 100%;">  
+			<html:legend align="left">>
+				<html:div></html:div>
+			</html:legend> -->
+	
+		<html:div>&cachePara;</html:div><spring flex="100%"/>
+		<html:div></html:div>
+		<box align="horizontal" style="width: 100%;"> 
+			<html:div>&memCache;</html:div>
+			<spring style="width:5px"/>
+			<html:input name="disk" type="text" size="3" id="pref:string:browser.cache.memory_cache_size" />
+			<html:div>&kbyes;</html:div>
+			<titledbutton name="clearm" value="&clearMemcacheButton.label;" />
+		</box> 
+		<box align="horizontal" style="width: 100%;"> 
+			<html:div>&diskCache;</html:div>
+			<spring style="width:5px"/>
+			<html:input name="disk" type="text" size="3" id="pref:string:browser.cache.disk_cache_size" />
+			<html:div>&kbyes;</html:div>
+			<titledbutton name="clearm" value="&clearDiskcacheButton.label;" />
+		</box>
+		<box align="horizontal" style="width: 100%;"> 
+			<html:div>&diskCacheFolder;</html:div>
+			<html:input name="disk" type="text" size="20" id="pref:string:browser.cache.directory" />
+			<html:div>
+				<titledbutton value="Choose File..." align="left"/>
+			</html:div>
+		</box>
 
-<html:table>
-      <html:tr><html:td>&cachePara;
-	  </html:td></html:tr>  
-            <html:tr><html:td>&memCache;<html:input name="disk" type="text" size="3" id="pref:string:composer.source" />&kbyes;<html:input name="clearm" type="button" value="&clearMemcacheButton.label;" /></html:td></html:tr>           
-			<html:tr><html:td>Disk Cache:<html:input name="memory" type="text" size="3" id="pref:string:composer.source" />&kbyes;<html:input name="cleard" type="button" value="&clearDiskcacheButton.label;" /></html:td></html:tr> 
-</html:table>
+	</box>
 
-
-<html:table> 
-       &docCache;			
-			<html:tr><html:td><html:label><html:input type="radio" name="cache" id="pref:0:int:composer.font.size" />&oncePsessionRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="radio" name="cache" id="pref:1:int:composer.font.size" />&everyTimeRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input type="radio" name="cache" id="pref:2:int:composer.font.size" />&neverRadio.label;</html:label></html:td></html:tr>
-</html:table>
+	<box align="vertical" style="width: 100%;">
+				<html:div>&docCache;</html:div>
+		<html:div>
+    		<html:input type="radio" name="cache" id="pref:0:browser.cache.check_doc_frequency" checked="true"/>
+			<html:label for="pref:0:browser.cache.check_doc_frequency" accesskey="o" tabindex="0">
+			&oncePsessionRadio.label;
+			</html:label>
+		</html:div>
+		<html:div>
+    		<html:input type="radio" name="cache" id="pref:1:browser.cache.check_doc_frequency" />
+			<html:label for="pref:1:browser.cache.check_doc_frequency" accesskey="e" tabindex="0">
+			&everyTimeRadio.label;	
+			</html:label>
+		</html:div>
+    	<html:div>
+    		<html:input type="radio" name="cache" id="pref:2:browser.cache.check_doc_frequency" />
+			<html:label for="pref:2:browser.cache.check_doc_frequency" accesskey="n" tabindex="0">
+			&neverRadio.label;	
+			</html:label>
+		</html:div>	
+	</box>
+	<!--	</html:fieldset> -->
 </html:div>
 </window>
 
diff --git a/xpfe/components/prefwindow/resources/content/pref-colors.xul b/xpfe/components/prefwindow/resources/content/pref-colors.xul
index 4559dc7be38e..fa68b6c91672 100644
--- a/xpfe/components/prefwindow/resources/content/pref-colors.xul
+++ b/xpfe/components/prefwindow/resources/content/pref-colors.xul
@@ -1,12 +1,12 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
 <!DOCTYPE window
 [
 <!ENTITY  window.title "Colors">
-<!ENTITY  colorsHeader "Colors">
+<!ENTITY  lHeader "Colors">
+<!ENTITY  rHeader "Change the colors in your display">
+<!ENTITY  color "Colors">
 <!ENTITY  text "Text:">
 <!ENTITY  colorPick "Color Picker">
 <!ENTITY  background "Background:">
@@ -16,40 +16,74 @@
 <!ENTITY  unvisit "Unvisited Links:">
 <!ENTITY  visit "Visited Links:">
 <!ENTITY  someProvColors "Sometimes a document will provide its own colors and background.">
-<!ENTITY  alwaysOverCheck.label "Always use my colors, overriding documents.">
+<!ENTITY  alwaysOverCheck.label "Always use my colors, overriding documents">
 ]> 
 
 <xul:window xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="StartUp('Colors')"  title="&window.title;">
+        onload="StartUp('Colors')"  title="&window.title;" align="vertical">
 
-<html:script language="JavaScript" src="PrefsWindow.js"/>
+<html:script language="JavaScript" src="chrome://pref/content/PrefsWindow.js"/>
 <html:div flex="100%">
-	<html:div ID="top">
-		<html:span ID="lefttext">
-			&colorsHeader;
-		</html:span>
-	</html:div>
 
-   <html:table>
-		<html:tr><html:td>&text;</html:td><html:td>&text;</html:td></html:tr>
-		<html:tr><html:td>&background;</html:td><html:td>&colorPick;</html:td></html:tr>
-		<html:tr><html:td><html:label><html:input  type="checkbox" id="pref:0:bool:browser.wfe.use_windows_colors" val="checked" />&useWinColorsCheck.label;</html:label></html:td></html:tr>
-   </html:table>
+	<box id="header" style="width:100%" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/>
+		  <html:div>&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+  <box flex="100%" align="horizontal" style="width: 100%;">
+	<box align="vertical" flex="50%" style="width: 50%;">
+		<html:fieldset style="width: 50%;">
+					<html:legend align="left"> 
+			<html:div>&color;</html:div> 
+					</html:legend> 
+			<html:div>&text;<spring flex="50%"/>&colorPick;</html:div>
+			<html:div>&background;<spring flex="50%"/>&colorPick;</html:div>
+			<html:div>
+				<html:input  type="checkbox" id="pref:0:bool:browser.wfe.use_windows_colors" val="checked" />
+			<html:label for="pref:0:bool:browser.wfe.use_windows_colors" accesskey="w" tabindex="0">
+				&useWinColorsCheck.label;
+			</html:label>
+			</html:div> 
+	    	</html:fieldset>
+	</box>  
+	<spring style="width:10px"/>
+	<box align="horizontal" flex="50%" style="width: 50%;">
+			<html:fieldset style="width: 50%;">
+					<html:legend align="left">
+			<html:div>&links;</html:div> 
+					</html:legend>
+			<html:div>&unvisit;<spring flex="50%"/>&colorPick;</html:div>
+			<html:div>&visit;<spring flex="50%"/>&colorPick;</html:div>
+			<html:div><html:input  type="checkbox" id="pref:0:bool:browser.underline_anchors" val="checked" />		
+				<html:label for="pref:0:bool:browser.underline_anchors" accesskey="u" tabindex="0">				
+				&underLinksCheck.label;
+				</html:label>
+			
+			</html:div>		
+		</html:fieldset>
+	</box>  
+  </box>
 
-<html:table>
-&links;
-		<html:tr><html:td>&unvisit;</html:td><html:td>&colorPick;</html:td></html:tr>
-		<html:tr><html:td>&visit;</html:td><html:td>&colorPick;</html:td></html:tr>
-		<html:tr><html:td><html:label><html:input  type="checkbox" id="pref:0:bool:browser.underline_anchors" val="checked" />&underLinksCheck.label;</html:label></html:td></html:tr>
-</html:table>
-
-<html:br/>
-
-<html:table>
-   <html:tr><html:td>&someProvColors;</html:td></html:tr>
-   <html:tr><html:td><html:label><html:input type="checkbox" id="pref:0:bool:browser.use_document_" />&alwaysOverCheck.label;</html:label></html:td></html:tr>
-</html:table>
+	<box align="horizontal" flex="100%" style="width: 100%;">
+			<html:fieldset style="width: 100%;">
+					<html:legend align="left">
+			<html:div></html:div> 
+					</html:legend>
+			<html:div>
+				&someProvColors;
+			</html:div>
+			<html:div>
+				<html:input type="checkbox" id="pref:0:bool:browser.use_document_colors" />
+				<html:label for="pref:0:bool:browser.use_document_colors" accesskey="a" tabindex="0">
+				&alwaysOverCheck.label;
+			</html:label>
+			</html:div>		
+		</html:fieldset>
+	</box>
 
 </html:div>
 </xul:window>
diff --git a/xpfe/components/prefwindow/resources/content/pref-composer.xul b/xpfe/components/prefwindow/resources/content/pref-composer.xul
index d96396f3400e..e5d72f748aab 100644
--- a/xpfe/components/prefwindow/resources/content/pref-composer.xul
+++ b/xpfe/components/prefwindow/resources/content/pref-composer.xul
@@ -1,19 +1,19 @@
 <?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://global/skin/dialogs.css" type="text/css"?>
-<?xml-stylesheet href="chrome://pref/skin/pref.css" type="text/css"?>
 
 <!DOCTYPE window [
 <!ENTITY  title.label "Composer">
-<!ENTITY  compheader "Composer">
+<!ENTITY  lHeader "Composer">
+<!ENTITY  rHeader "Set general preferences for the authoring Web pages">
 <!ENTITY  authorName "Author Name">
 <!ENTITY  AutoSaveCheck.label "Automatically save page every">
 <!ENTITY  minText "minutes">
 <!ENTITY  exterLegand.label "External Editors">
-<!ENTITY  htmlSource "Html Source">
+<!ENTITY  htmlSource "HTML Source:">
 <!ENTITY  chooseButton.label "Choose...">
 <!ENTITY  fontSizeHeader "Font Size Mode">
-<!ENTITY  img "Images">
+<!ENTITY  img "Images:">
 <!ENTITY  relSizeRadio.label "Show relative size as points based on your Navigator font sizes">
 <!ENTITY  relfontRadio.label "Show relative HTML font scale: -2, -1, 0, +1, +2, +3, +4">
 <!ENTITY  relScaleRadio.label "Show relative HTML scale and absolute &quot;point-size&quot; attributes">
@@ -22,30 +22,118 @@
 
 <window xmlns:html="http://www.w3.org/TR/REC-html40"
 		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="return StartUp('Composer');"  title="&title.label;">
+        onload="return StartUp('Composer');"  alighn="vertical" title="&title.label;">
 
 <html:script language="javascript" src="PrefsWindow.js"/>
 <html:div flex="100%">
+	<box id="header" style="width:100%" align="horizontal">  
+		  <spring style="width:20px"/>
+		  <html:div style="vertical-align: middle;">
+		  <html:B>&lHeader;</html:B>
+		  </html:div>
+   		  <spring flex="100%"/>
+		  <html:div>&rHeader;</html:div><spring style="width:5px"/>
+	</box>
+
+	<box align="vertical" flex="100%" style="width: 100%;">
+		<html:fieldset style="width: 100%;">
+					<html:legend align="left"> 
+			<html:div></html:div> 
+					</html:legend> 
+		<html:div>
+			&authorName;
+			<html:input name="author" type="text" id="pref:string:editor.author" />
+		</html:div>
+		<html:div>
+			<html:input name="autosave" type="checkbox" id="pref:0:int:editor.auto_save_delay" />
+			<html:label for="pref:0:int:editor.auto_save_delay" accesskey="a" tabindex="0">
+				&AutoSaveCheck.label;
+			</html:label>		
+			<html:input name="time" type="text" size="3" value="5" id="pref:5:int:editor.auto_save_delay" />
+			&minText;	
+		</html:div>
+	</html:fieldset>
+	</box>  
+
+<box align="vertical" flex="100%" style="width: 100%;">
+		<html:fieldset style="width: 100%;">
+					<html:legend align="left"> 
+			<html:div>&exterLegand.label;</html:div> 
+					</html:legend> 
+	 	<html:div>
+			&htmlSource;
+		</html:div>
+		<html:div>
+			<html:input name="&chooseButton.label;" type="text" id="pref:string:editor.html_directory" />
+			<titledbutton name=""  value="&chooseButton.label;" />
+		</html:div>
+	<html:div>
+			&img;
+		</html:div>
+		<html:div>
+			<html:input name="chooseButton.label" type="text" id="pref:string:editor.image_editor" />
+			<titledbutton name=""  value="&chooseButton.label;" />
+		</html:div> 
+
+	</html:fieldset>
+	</box> 
+
+	<box align="vertical" flex="100%" style="width: 100%;">
+		<html:fieldset style="width: 50%;">
+					<html:legend align="left"> 
+			<html:div>&fontSizeHeader;</html:div> 
+					</html:legend> 
+	<html:div>
+		<html:input name="font" type="radio" id="pref:0:int:fontsize_mode" val="checked" />	
+		<html:label for="pref:0:int:fontsize_mode" accesskey="s" tabindex="0">
+		&relSizeRadio.label;			
+		</html:label>
+	</html:div>
+	<html:div>
+		<html:input name="font" type="radio" id="pref:1:int:fontsize_mode" />
+		<html:label for="pref:1:int:fontsize_mode" accesskey="f" tabindex="0">
+		&relfontRadio.label;			
+		</html:label>
+	</html:div>
+	<html:div>
+		<html:input name="font" type="radio" id="pref:2:int:fontsize_mode" />
+		<html:label for="pref:2:int:fontsize_mode" accesskey="c" tabindex="0">			
+		&relScaleRadio.label;
+		</html:label>
+	</html:div>
+	</html:fieldset>
+	</box>  
+
+
+
+<!--
 <html:DIV ID="top">
 		<html:SPAN ID="lefttext">&compheader;</html:SPAN>
 </html:DIV>
 
 <form>
 <html:table> 
-      <html:tr><html:td>&authorName;<html:input name="author" type="text" id="pref:string:editor.author" /></html:td></html:tr>           
-			<html:tr><html:td><html:label><html:input name="autosave" type="checkbox" id="pref:0:int:editor.auto_save_delay" />&AutoSaveCheck.label;</html:label></html:td>
-			<html:td><html:input name="time" type="text" size="3" value="5" id="pref:5:int:editor.auto_save_delay" />&minText;</html:td></html:tr>			
+      <html:tr><html:td>&authorName;
+	  <html:input name="author" type="text" id="pref:string:editor.author" /></html:td></html:tr>           
+			<html:tr><html:td><html:label>
+			<html:input name="autosave" type="checkbox" id="pref:0:int:editor.auto_save_delay" />
+			&AutoSaveCheck.label;</html:label></html:td>
+			<html:td>
+			<html:input name="time" type="text" size="3" value="5" id="pref:5:int:editor.auto_save_delay" />
+			&minText;</html:td></html:tr>			
 </html:table>
 </form>
 &exterLegand.label;	
 <form>	
 <html:table>		
       <html:tr><html:td>&htmlSource;</html:td></html:tr>
-			<html:tr><html:td><html:input name="&chooseButton.label;" type="text" id="pref:string:editor.html_directory" /></html:td>
+			<html:tr><html:td>
+			<html:input name="&chooseButton.label;" type="text" id="pref:string:editor.html_directory" /></html:td>
 			<html:td><html:input name="" type="button" value="&chooseButton.label;" /></html:td></html:tr>
 			
 			<html:tr><html:td>&img;</html:td></html:tr>
-			<html:tr><html:td><html:input name="chooseButton.label" type="text" id="pref:string:editor.image_editor" /></html:td>
+			<html:tr><html:td>
+			<html:input name="chooseButton.label" type="text" id="pref:string:editor.image_editor" /></html:td>
 			<html:td><html:input name="chooseButton.label" type="button" value="choose..." /></html:td></html:tr>
 </html:table>
 </form>
@@ -53,11 +141,17 @@
 &fontSizeHeader;
 <html:table>
       		
-			<html:tr><html:td><html:label><html:input name="font" type="radio" id="pref:0:int:fontsize_mode" val="checked" />&relSizeRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input name="font" type="radio" id="pref:1:int:fontsize_mode" />&relfontRadio.label;</html:label></html:td></html:tr>
-			<html:tr><html:td><html:label><html:input name="font" type="radio" id="pref:2:int:fontsize_mode" />&relScaleRadio.label;</html:label></html:td></html:tr>
+			<html:tr><html:td><html:label>
+			<html:input name="font" type="radio" id="pref:0:int:fontsize_mode" val="checked" />
+			&relSizeRadio.label;</html:label></html:td></html:tr>
+			<html:tr><html:td><html:label><html:input name="font" type="radio" id="pref:1:int:fontsize_mode" />
+			&relfontRadio.label;</html:label></html:td></html:tr>
+			<html:tr><html:td><html:label><html:input name="font" type="radio" id="pref:2:int:fontsize_mode" />
+			&relScaleRadio.label;</html:label></html:td></html:tr>
 </html:table>
 </form>
+
+-->
 </html:div>
 </window>