[Maposmatic-dev] [PATCH 23/24] Fix layout and stylesheet for browser compatibility

[Maxime Petazzoni]

---
 www/media/style.css                |   35 ++++++++++------
 www/templates/maposmatic/base.html |   76 ++++++++++++++++++-----------------
 2 files changed, 61 insertions(+), 50 deletions(-)

diff --git a/www/media/style.css b/www/media/style.css
index 7d8886f..5770220 100644
--- a/www/media/style.css
+++ b/www/media/style.css
@@ -39,6 +39,10 @@ a img {
   border: none;
 }
 
+img {
+  -ms-interpolation-mode: bicubic;
+}
+
 /* Header */
 #header {
   background-color: #cee5f6;
@@ -105,18 +109,23 @@ ul#nav li.activelink a {
   border-bottom: none;
 }
 
+#layout {
+  clear: both;
+  margin: 1em;
+  margin-top: 2em;
+}
 
 /* Main content */
 #content {
-  clear: both;
-  margin: 1em 0 2em 2em;
-  float: left;
-  width: 70%;
+  width: 75%;
+  vertical-align: top;
+  padding-right: 1em;
 }
 
 #content h1 {
   color: #0066b3;
   border-bottom: 1px black solid;
+  margin-top: 0;
 }
 
 #content h2 a {
@@ -159,11 +168,11 @@ p#more span {
 
 /* Meta informations */
 #meta {
-  float: right;
-  width: 22%;
-  margin: 3em 1em;
-  padding: 0 0 1em 1em;
+/*  float: right; */
+  width: 25%;
   border-left: 1px #ccc solid;
+  vertical-align: top;
+  padding-left: 1em;
 }
 
 #meta h3 {
@@ -181,6 +190,7 @@ p#more span {
 
 #bnews ul {
   padding-left: 1.5em;
+  margin: 0;
 }
 
 #bnews li {
@@ -204,7 +214,6 @@ p#more span {
 .job {
   margin: 1em 0;
   padding: 1em;
-  width: auto;
 
   border: 1px #ccc solid;
 }
@@ -228,7 +237,6 @@ h2.jobtitle a {
 }
 
 table.jobinfo {
-  width: 100%;
   margin-top: 1em;
 }
 
@@ -249,7 +257,7 @@ table.jobinfo td.info {
 
 div.mapsearch {
   float: right;
-  margin-top: 2em;
+  margin-top: 1em;
   font-style: italic;
 }
 
@@ -284,6 +292,7 @@ a.selectedletter {
 #mainfrm ul {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 #mainfrm tr.bybbox {
@@ -320,9 +329,9 @@ a.selectedletter {
 #suggest {
   margin: 0;
   margin-top: -3px;
-  position: absolute;
 
-  width: 600px;
+  width: 80%;
+  max-width: 600px;
   list-style: none;
   background: white;
   border: 1px black solid;
diff --git a/www/templates/maposmatic/base.html 
b/www/templates/maposmatic/base.html
index 8247e21..4b3e2b8 100644
--- a/www/templates/maposmatic/base.html
+++ b/www/templates/maposmatic/base.html
@@ -69,46 +69,48 @@
       </ul>
     </div>
 
-    <div id="content">
-      {% block page %}{% endblock %}
-    </div>
+    <table id="layout"><tbody><tr>
+      <td id="content">
+        {% block page %}{% endblock %}
+      </td>
 
-    <div id="meta">
-      <div id="bmap">
-        <h3>{% trans "Random map" %}</h3>
-        {% if randommap %}<p class="randommap">
-          <a href="{% url job-by-id randommap.id %}">
-            <img src="{{ randommap.get_thumbnail }}" /><br />
-            <i>{{ randommap.maptitle }}</i>
-          </a>
-        </p>
-        {% else %}<p>{% trans "No random map found." %}</p>
-        {% endif %}
-      </div>
+      <td id="meta">
+        <div id="bmap">
+          <h3>{% trans "Random map" %}</h3>
+          {% if randommap %}<p class="randommap">
+            <a href="{% url job-by-id randommap.id %}">
+              <img src="{{ randommap.get_thumbnail }}" /><br />
+              <i>{{ randommap.maptitle }}</i>
+            </a>
+          </p>
+          {% else %}<p>{% trans "No random map found." %}</p>
+          {% endif %}
+        </div>
 
-      <div id="bnews">
-        <h3>{% trans "Latest news" %}</h3>
-        <ul>
-          {% for entry in blogposts %}<li>
-            <a href="{{ entry.link }}">{{ entry.title }}</a><br />
-            <span class="newsinfo">
-              {% blocktrans with entry.updated_parsed|feedparsed|timesince as 
date %}published {{ date }} ago{% endblocktrans %}
-            </span>
-          </li>
-          {% endfor %}
-        </ul>
-      </div>
+        <div id="bnews">
+          <h3>{% trans "Latest news" %}</h3>
+          <ul>
+            {% for entry in blogposts %}<li>
+              <a href="{{ entry.link }}">{{ entry.title }}</a><br />
+              <span class="newsinfo">
+                {% blocktrans with entry.updated_parsed|feedparsed|timesince 
as date %}published {{ date }} ago{% endblocktrans %}
+              </span>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
 
-      <div id="bcontact">
-        <h3>{% trans "Contact" %}</h3>
-        <p>
-          {% trans "Mail:" %}
-          <a href="mailto:address@hidden";>address@hidden</a><br />
-          {% trans "IRC:" %}
-          <tt>#maposmatic</tt> {% trans "on" %} <tt>irc.freenode.net</tt>
-        </p>
-      </div>
-    </div>
+        <div id="bcontact">
+          <h3>{% trans "Contact" %}</h3>
+          <p>
+            {% trans "Mail:" %}
+            <a href="mailto:address@hidden";>address@hidden</a><br />
+            {% trans "IRC:" %}
+            <tt>#maposmatic</tt> {% trans "on" %} <tt>irc.freenode.net</tt>
+          </p>
+        </div>
+      </td>
+    </tr></tbody></table>
 
     <!-- Piwik statistics -->
     <script type="text/javascript">
-- 
1.6.3.3.261.g85c6