Search code examples
htmlcssfavicon

CSS and favicon different between direct IP and DNS address

I'm working on a site hosted from home and seeing differences between the direct IP version of the site and the DNS version.

DNS site:

  • No favicon.
  • No margin around html/body.!
  • Example

IP site:

  • Favicon shows up.
  • an 8-pixel margin shows up.
  • Example

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="***">
    <meta name="author" content="***">
    <link rel="shortcut icon" href="/resources/img/favicon.ico" />

    <title>***</title>

    <link href="/resources/css/main.css" rel="stylesheet">

  </head>
  <body>
    <div>
      <div class="titles">
        <center>
          <h2><a href="/index.html">***</a></h2>
          <h3><a href="/resources/doc/resume.pdf">Résumé</a> | <a href="https://github.com/SWPhantom" target="_blank">Github</a></h3>
          <br><br>
          <h2>Web Project Gallery</h2>
          <h3><a href="/flights/index.html">Safe Flights</a></h3>
        </center>
      </div>
      <div class="footer">
        <center>
          <a href="http://github.com/SWPhantom/" target="_blank">
          <img src="/resources/img/octocat.png" height="32" width="32"></a>
          <a href="http://***.tumblr.com/" target="_blank">
          <img src="/resources/img/tumblr.png"></a>
          <a href="http://twitter.com/***/" target="_blank">
          <img src="/resources/img/twitter.png" height="32" width="32"></a>
        </center>
      </div>
    </div>
  </body>
</html>

main.css:

html, body {
  font-family: 'AvenirLT-Heavy', sans-serif;
  color: #010101;
  height: 100%;
  background-color: #dddddd;
  background-repeat: no-repeat;
  background: -webkit-linear-gradient(#dddddd, #000000); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#dddddd, #000000); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#dddddd, #000000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#dddddd, #000000); /* Standard syntax */
}

Addition that fixes the margin issue:

margin: 0;

This, however, makes me a little uncomfortable. I assume that entering a site via direct IP should be no different than using a DNS.

Anyone have an explanation as to why this could happen (and help me with getting the favicon to show up in the DNS version of the site)?

DNS Settings on NameCheap: enter image description here

Solution

  • It is not uncommon that a webserver uses a different set of files for different host names in the request. In fact, that is necessary if a web server should be able to serve several domains or host names at the same time. You may have set up a virtual host on the webserver, with a document root different than the "default" web host, used to fall through to if no other virtual host matches the request. The effect you see has nothing to do with DNS settings, assuming both requests arrive at the same interface.