From f43ce687006a1f840b67ae6c48661801679bc337 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mattias=20Andr=C3=A9e?= <maandree@operamail.com>
Date: Sun, 28 Oct 2012 02:30:50 +0200
Subject: [PATCH] browser compability

---
 index.html | 72 +++++++++++++++++++++++++++++++-----------------------
 screen.css | 23 +++++++++++++++--
 2 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/index.html b/index.html
index 4aa83a82..3f1901d2 100644
--- a/index.html
+++ b/index.html
@@ -10,12 +10,11 @@
     <title>ponysay</title>
   </head>
   <body>
+    
     <div class="header">
       <table class="header" valign="middle">
 	<tr>
-	  <td class="title">
-            ponysay
-	  </td>
+	  <td class="title">ponysay</td>
 	  <td style="width : 100%;">
                <a target="page" href="./pages/index.html">intro</a>
                <a target="page" href="./pages/ponysay/index.html">manual</a>
@@ -27,52 +26,63 @@
 	</tr>
       </table>
     </div>
-    <div style="width : 100%; top : 60px; bottom : 0px; position : absolute;">
+    
+    <div class="main">
       <table class="main">
 	<col id="left"/>
 	<col id="right"/>
 	<tr>
+	  
 	  <td valign="top">
 	    <table>
+	      <cols class="image"/>
+	      <cols class="sep"/>
+	      <cols/>
+	      
 	      <tr>
-		<td>
-		  <img alt="ponysay example" src="bonbonlyra.png"/>
-		</td>
+		<td><img alt="ponysay example" src="bonbonlyra.png"/></td>
+		<td></td>
 	      </tr>
+	      
 	      <tr>
 		<td>
 		  <br/>
-		  <div style="width : 100%;">
-		    <table>
-		      <tr>
-			<td style="width : 100%;">
-			</td>
-			<td>
-			  <i>recommended reading:</i><br/>
-			  <a target="page" href="./pages/ponysay/Installing.html#Installing">Installing</a><br/>
-			  <a target="page" href="./pages/ponysay/Invoking-ponysay.html#Invoking-ponysay">Basic usage</a><br/>
-			  <a target="page" href="./pages/ponysay/Advanced-usage.html#Advanced-usage">Advanced usage</a><br/>
-			  <a target="page" href="./pages/ponysay/Environment-variables.html#Environment-variables">Configurations</a><br/>
-			  <br/>
-			  <i>external links:</i><br/>
-			  <a target="page" href="./pages/youtube-demo.html">Demonstration</a><br/>
-			  <a target="page" href="./pages/fortune+ponysay.html">ponysay fortunes</a><br/>
-			  <br/>
-			</td>
-		      </tr>
-		    </table>
-		  </div>
+		  <table class="fill">
+		    <tr>
+		      
+		      <td class="fill"></td>
+		      
+		      <td>
+			<i>recommended reading:</i><br/>
+			<a target="page" href="./pages/ponysay/Installing.html#Installing">Installing</a><br/>
+			<a target="page" href="./pages/ponysay/Invoking-ponysay.html#Invoking-ponysay">Basic usage</a><br/>
+			<a target="page" href="./pages/ponysay/Advanced-usage.html#Advanced-usage">Advanced usage</a><br/>
+			<a target="page" href="./pages/ponysay/Environment-variables.html#Environment-variables">Configurations</a><br/>
+			<br/>
+			
+			<i>external links:</i><br/>
+			<a target="page" href="./pages/youtube-demo.html">Demonstration</a><br/>
+			<a target="page" href="./pages/fortune+ponysay.html">ponysay fortunes</a><br/>
+			<br/>
+		      </td>
+		      
+		    </tr>
+		  </table>
 		</td>
+		
+		<td></td>
 	      </tr>
+	      
 	    </table>
 	  </td>
-	  <td valign="top" style="height : 100%;">
-	    <div id="text">
-	      <iframe id="page" name="page" src="./pages/index.html"></iframe>
-	    </div>
+	  
+	  <td valign="top">
+	    <div id="text"><iframe id="page" name="page" src="./pages/index.html"></iframe></div>
 	  </td>
+	  
 	</tr>
       </table>
     </div>
+    
   </body>
 </html>
diff --git a/screen.css b/screen.css
index 672508ce..2432ac31 100644
--- a/screen.css
+++ b/screen.css
@@ -29,7 +29,14 @@ table.header {
     height : 100%;
 }
 
-.main {
+div.main {
+    width : 100%;
+    top : 60px;
+    bottom : 0px;
+    position : absolute;
+}
+
+table.main {
     width : 100%;
     height : 100%;
     border : 0;
@@ -57,8 +64,12 @@ table.header {
     width : 100%;
 }
 
+.fill {
+    width : 100%;
+}
+
 .title {
-    passing : 4px 0px 8px 10px;
+    padding : 4px 0px 8px 10px;
     /*
     position : relative;
     left : 0px;
@@ -72,6 +83,14 @@ table.header {
     text-decoration : none;
 }
 
+cols.image {
+    width : 487px;
+}
+
+cols.sep {
+    width : 53px;
+}
+
 
 a:link    {color : #000000; text-decoration : none; border : 0px solid #FFFFFF; background-color : transparent;}
 a:active  {color : #000000; text-decoration : none; border : 0px solid #FFFFFF; background-color : transparent;}