Note that there are some explanatory texts on larger screens.

plurals
  1. POOdd centering CSS problem in modern non-Chrome browsers?
    primarykey
    data
    text
    <p>For some reason, I have this one webpage which renders something great in Chrome, but completely different on FireFox and IE.</p> <p>The effect may be seen <a href="http://www.tiletabs.com/v2.htm" rel="nofollow">here</a>.</p> <p>The other browsers appear to remove my margin centering of my <code>header</code> and <code>footer</code> elements.</p> <p>Is there a particular reason this is only working in Chrome?</p> <p>Here is my HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;TileTabs&lt;/title&gt; &lt;link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico"&gt; &lt;link rel="stylesheet" href="css/v2.css" type="text/css"&gt; &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css"&gt; &lt;link rel="stylesheet" href="css/veramono.css" type="text/css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script src="js/tile_interaction.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;img src="images/logo/logo_v3.png" alt="logo" /&gt; &lt;/header&gt; &lt;div id="content"&gt; &lt;ul&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="tile"&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;footer&gt; &lt;a class="emailus" href="index.htm"&gt;Home&lt;/a&gt; | &lt;a class="emailus" href="about.htm"&gt;About&lt;/a&gt; | &lt;a class="emailus" href="contact.htm"&gt;Contact&lt;/a&gt; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>body { background: #F6F6F6; font-family: 'BitstreamVeraSansMonoRoman', 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif; margin: 0; } a:link, a:visited, a:hover, a:active { color: white; text-decoration: none; } header { width: 920px; background: #999; margin: 0px auto; text-align: center; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; } #content { width: 920px; height: 760px; background: #999; margin: 0px auto; } footer { width: 920px; background: #999; margin: 0px auto; text-align: center; padding-top: 10px; padding-bottom: 10px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } li { float: left; list-style: none; padding: 34px; } .tile { cursor: pointer; background: red; border: 2px solid #000; width: 100px; height: 100px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload