Databases
StackOverflow2013
Postsdbo
POChrome Renders CSS Differently Online vs Offline?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChrome Renders CSS Differently Online vs Offline?
    text
    copied!<p>I'm having a problem with Chrome rendering my page fine when loaded locally, but something goes wrong once the page is online. The first thing I did was check Safari, because they both share the same rendering engine. Safari renders my page fine.</p> <p>Clicking on a link on the page and pressing the back button causes the page to load fine as well.</p> <p>Here is an image showing how the page loads locally on Chrome: <img src="https://i.stack.imgur.com/83vKd.png" alt="enter image description here"></p> <p>And here the header is pushed down once the page is online: <img src="https://i.stack.imgur.com/C5yFH.png" alt="enter image description here"></p> <p>Here is the relevant html:</p> <pre><code>&lt;!-- header --&gt; &lt;div id="header2"&gt; &lt;a href="#"&gt;&lt;img src="images/detailpages/logo.png" alt="logo" /&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Features&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Pricing&lt;/a&gt;&lt;/li&gt; &lt;li class="blue"&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;form&gt;&lt;input type="text" name="form" placeholder="type another channel" id="navsearch" /&gt;&lt;img src="images/detailpages/search.png" alt="search" /&gt;&lt;/form&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- end header --&gt; </code></pre> <p>And CSS:</p> <pre><code>#header2 { position: relative; z-index: 999; height: 40px; width: 100%; background: #000; box-shadow: 0em 0em 0.5em #000; -webkit-box-shadow: 0em 0em 0.5em #000; /* safari */ /* header nav type */ font-family: "Varela Round", Helvetica, Arial, sans-serif; font-size: 15px; } #header2 ul { float: right; list-style-type: none; } #header2 li { display: block; float: left; height: 32px; margin: 10px 16px 0; } /* sign up/log in button */ #header2 li.blue { background: url('../images/detailpages/login.png'); width: 170px; height: 40px; margin: 0; } #header2 li.blue a { display: block; float: left; margin: 10px 3px 0 24px; } #header2 input { height: 22px; width: 220px; padding: 0 8px; font-family: "Varela Round", Helvetica, Arial, sans-serif; font-size: 14px; color: #333; } #header2 form img { display: block; float: right; padding-left: 5px; } </code></pre> <p>This guy had the same problem but it doesn't look like there was a solution: <a href="https://stackoverflow.com/questions/7891348/css-rendering-in-chrome-differs-online-from-offline">CSS rendering in Chrome differs online from offline</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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