Note that there are some explanatory texts on larger screens.

plurals
  1. POChrome occasionally renders my HTML/CSS differently
    text
    copied!<p>I just started learning HTML/CSS and am trying to make a personal site from scratch (no CSS tools)</p> <p>When I tested my site in Firefox and IE last night it looked nice and clean as seen <img src="https://i.stack.imgur.com/kkAYv.png" alt="http://i.imgur.com/vQd57rk.png"></p> <p>When I tested my site in Chrome my links got moved around: <img src="https://i.stack.imgur.com/uZLNq.png" alt="http://i.imgur.com/DjaziKg.png"></p> <p>Does anybody know what happened here? This is my markup:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Home | Some Website!&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 0; } body { width: 960px; font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; background-color: #FFFFF0; margin: 0 auto; } #header { border-style: solid; } #header img { margin: 4px 0px 0px 4px; } #header ul { list-style-type: none; display: inline; margin: 25px 30px 0px 0px; float: right; font-size: x-large; } #header ul li { display: inline; margin: 0 30px; } #header li a:link { color: #FF00FF; text-decoration: none; } #header li a:hover { text-decoration: underline; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;img src="http://i.imgur.com/YbAx7y1.png" alt="Temp Logo!"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="about.html"&gt;About Me&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="resume.html"&gt;R&amp;eacute;sum&amp;eacute;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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