Fix Rendering Issues on Older Browsers

3 files changed, 49 insertions, 15 deletions

diff --git a/static/css/main.css b/static/css/main.css
index cf7ed98b..4e5df555 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -249,8 +249,9 @@ summary {
     display: inline-block;
     padding: 5px 10px;
     cursor: pointer;
-    background-color: #06022c;
+    background: #06022c;
     color: #8693e1;
+    margin: 0 5px;
 }
 
 .page-disabled {
@@ -260,10 +261,14 @@ summary {
 
 .page-active {
     color: #fff;
-    background-color: #000;
+    background: #000;
     text-decoration: none;
 }
 
+.page-separator {
+    border-right: 1px solid #aaa;
+}
+
 .label {
     width: 100%;
     display: inline-block;
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index b0838887..b558d6fb 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -71,7 +71,7 @@
     padding: 10px 0px 20px 0px;
 ">
       <center>
-        <table style="table-layout: fixed; width: 1000px;">
+        <table style="table-layout: fixed; width: 1000px; text-align:left;">
           <td width="250px" style="vertical-align:top;">{% include 'blog/partials/sidebar.html' %}</td>
           <td width="750px" style="vertical-align:top;"><div>{% block content %} {% endblock %}</div></td>
         </table>
diff --git a/templates/dev_status/home.html b/templates/dev_status/home.html
index 7fa8bf06..0edf5c01 100644
--- a/templates/dev_status/home.html
+++ b/templates/dev_status/home.html
@@ -51,7 +51,7 @@
       {% for repo in repos %}
         <tr>
           <td><a href="{% url 'dev_status:repo' repo.name %}">
-              <img src="{% url 'ignis:cover_image' repo.name %}.gif" style="display: inline-block; margin-right: 10px;" class="zoom">
+              <img src="{% url 'ignis:cover_image' repo.name %}.gif" style="display: inline-block; margin-right: 10px;" class="zoom" border="0">
             </a>
           </td>
           <td>
@@ -64,27 +64,56 @@
     </table>
   </div>
   <div class="pagination">
-    {% if num_pages and page %}
+    <center>
+    <table style="margin: 0 auto; border-spacing: 5px; border-collapse: separate;">
+      <tr>
+        {% if page == 1 %}
+          <td class="page page-disabled"><a href="#">&laquo;</a></td>
+          <td class="page page-disabled" style="margin-right: 15px;"><a href="#">&lsaquo;</a></td>
+        {% else %}
+          <td class="page"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page=1">&laquo;</a></td>
+          <td class="page" style="margin-right: 15px;"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ page|add:-1 }}">&lsaquo;</a></td>
+        {% endif %}
+        <td class="page-separator"> </td>
+        {% for i in num_pages|times  %}
+          <td class="page {% if i == page %}page-active{% endif %}"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ i }}">{{ i }}</a></td>
+        {% endfor %}
+        <td class="page-separator"> </td>
+        {% if page == num_pages %}
+          <td class="page page-disabled" style="margin-left: 15px;"><a href="#">&rsaquo;</a></td>
+          <td class="page page-disabled"><a href="#">&raquo;</a></td>
+        {% else %}
+          <td class="page" style="margin-left: 15px;"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ page|add:1 }}">&rsaquo;</a></td>
+          <td class="page"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ num_pages }}">&raquo;</a></td>
+        {% endif %}
+      </tr>
+    </table>
+    </center>
+  </div>
+
+    {% comment %} {% if num_pages and page %}
         <div class="pagination">
             {% if page == 1 %}
-                <a href="#" class="page page-disabled">&laquo;</a>
-                <a href="#" class="page page-disabled" style="margin-right: 15px;">&lsaquo;</a>
+                <span class="page page-disabled"><a href="#">&laquo;</a></span>
+                <span class="page page-disabled" style="margin-right: 15px;"><a href="#">&lsaquo;</a></span>
             {% else %}
-                <a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page=1" class="page">&laquo;</a>
-                <a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ page|add:-1 }}" class="page" style="margin-right: 15px;">&lsaquo;</a>
+                <span class="page"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page=1">&laquo;</a></span>
+                <span class="page" style="margin-right: 15px;"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ page|add:-1 }}">&lsaquo;</a></span>
             {% endif %}
+            <span class="page-separator"> </span>
             {% for i in num_pages|times  %}
-                <a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ i }}" class="page {% if i == page %}page-active{% endif %}">{{ i }}</a>
+                <span class="page {% if i == page %}page-active{% endif %}"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ i }}">{{ i }}</a></span>
             {% endfor %}
+            <span class="page-separator"> </span>
             {% if page == num_pages %}
-                <a href="#" class="page page-disabled" style="margin-left: 15px;">&rsaquo;</a>
-                <a href="#" class="page page-disabled">&raquo;</a>
+                <span class="page page-disabled" style="margin-left: 15px;"><a href="#">&rsaquo;</a></span>
+                <span class="page page-disabled"><a href="#">&raquo;</a></span>
             {% else %}
-                <a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ page|add:1 }}" class="page" style="margin-left: 15px;">&rsaquo;</a>
-                <a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ num_pages }}" class="page">&raquo;</a>
+                <span class="page" style="margin-left: 15px;"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ page|add:1 }}">&rsaquo;</a></span>
+                <span class="page"><a href="{% url 'dev_status:home'%}?search={{ search }}&items={{ items }}&filter={{ filter }}&sort={{ sort }}&direction={{ direction }}&page={{ num_pages }}">&raquo;</a></span>
             {% endif %}
         </div>
-    {% endif %}
+    {% endif %} {% endcomment %}
     </div>
 </div>
 {% endblock %}