Icons not loading properly in chrome

Question

Hey all, I just recently updated a clients website by expanding the footer to include social media icons that link to their respective pages (twitter and facebook) as well as a bit more color and some contact information. Further, I added some icons (png files I created myself via illustrator) to one of the pages. When I test the website locally everything works great, and all of the code (CSS and HTML) checks out as completely valid. However, when I load the site (ctmg.us) in chrome, the icons all load incorrectly. They appear larger than they should and with a border. What is even more odd is that it loads properly in safari. Does anyone know why they would behave differently in chrome? Any input would be helpful as the site looks horrid in its current state on chrome.

Answer 1 · 2014-09-13T19:06:21Z

September 13, 2014 7:06pm

It's hard to say what the issue is without seeing the code. Can you post a link or a snippet?

Answer 2 · 2014-09-13T19:49:23Z

September 13, 2014 7:49pm

Hi Hampton, Have you tried uploading the images in a different format to see if you get the same issue, I know some browsers may interpret the png information differently than others. Something to do with the gamma information in the png.

If you test this and it works at least it will narrow down the issue.

Answer 3 · 2014-09-13T20:47:26Z

September 13, 2014 8:47pm

Even when I changed the icon format to .gif, the problem persisted. I will copy the html of the services page, which includes all of the icons:

<!DOCTYPE html>
<html>
<head>
    <title>Chucktown Music Group</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:100,400,800,400italic' rel='stylesheet' type='text/css'>   <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body id="services">
    <header class="main-header">
        <div class="grid-container">    
            <div class="grid-3 main-logo"><a href="index.html"> </a></div>
            <ul class="grid-8 main-nav">
                <li><a href="about.html" id="aboutnav">About</a></li>
                <li><a href="services.html" id="servnav" class="selected">Services</a></li>
                <li><a href="music.html" id="musnav">Music</a></li>
                <li><a href="artists.html" id="artnav">Artists</a></li>
                <li><a href="contact.html" id="connav">Contact</a></li>
            </ul>
        </div>
    </header>
    <div class="grid-container wrapper">
        <div class="grid-12 headline">
            <h2>Our Services</h2>
            <h3>Initial Consultation</h3>
            <p>
                This is a meeting between Artist(s) and CTMG representative(s) to determine what services that CTMG provides will be retained. CTMG representative(s) will review and give feedback on based on the artist(s)&#39; vision&#58;
            </p>
            <ul class="list">
                <li class="publicity">Pubilicty &#8211; Photography, Bio, Press around CD/single release, Tour press, TV appearances</li>
                <li class="promotion">Promotion &#8211; Radio play, Radio appearances, Video play, Video Channel appearances</li>
                <li class="marketing">Marketing &#8211; Logo Design, Website Design, Branding, Social Media Marketing</li>
            </ul>
            <h3>Production</h3>
            <p>Producer, Mark Bryan aids in song arrangement, pre-production, songwriting input and musicianship (if desired), help acquiring other musicians, an engineer, fully mixed and mastered versions, and accommodations (if needed)</p>
            <h3>Licensing</h3>
            <p>Shop song(s) to music executives, companies and supervisors for placement consideration in TV shows, commercials and/or movies.</p>
            <h3>Registration and Digital Distribution of Material</h3>
            <p>Performing Rights Organization (collection of royalties, between copyright holders and parties who wish to use copyrighted works publicly for both digital and non-digital works.)</p>
            <p>Digital Distrubution that will land your songs on at least the following:</p>
            <ul class="list">
                <li><img src="img/iconitunes.gif" alt="iTunes Icon"></li>
                <li><img src="img/iconspotify.gif" alt="Spotify Icon"></li>
                <li><img src="img/iconamazon.gif" alt="Amazon Icon"></li>
                <li><img src="img/icongoogleplay.gif" alt="Google Play Icon"></li>
                <li><img src="img/iconxbox.gif" alt="Xbox Icon"></li>
                <li><img src="img/iconbeats.gif" alt="Beats Icon"></li>
                <li><img src="img/iconshazam.gif" alt="Shazam Icon"></li>
                <li><img src="img/iconiheartradio.gif" alt="iHeart Radio Icon"></li>
                <li><img src="img/iconradio.gif" alt="Rdio Icon"></li>
            </ul>
            <p>Submission to the following digital services:</p>
            <ul class="other-list">
                <li><img src="img/iconpandora.gif" alt="Pandora Icon"></li>
                <li><img src="img/iconsiriusxm.gif" alt="SiriusXM Icon"></li>
                <li><img src="img/iconfiller.gif" alt="Filler to aid layout"></li>
            </ul>
        </div>
    </div>
<footer class="main-footer">
    <div class="grid-container">
        <ul class="grid-12 row">
            <li>&#169; Hampton Dunlap</li>
            <li><a href="http://facebook.com/pages/Chucktown-Music-Group/170938232934615"><img src="img/facebook.gif" alt="Facebook Logo" class="social-icon"></a></li>
            <li><a href="http://twitter.com/chucktownmusic"><img src="img/twitter.gif" alt="Twitter Logo" class="social-icon"></a></li>
            <li><a href="mailto:info@ctmg.us">info@ctmg.us</a></li>
            <li>136 Rutledge Ave. Charleston, South Carolina 29403</li>
        </ul>
    </div>
</footer>
</body>
</html>

And here is a snippet of the CSS for the icons:

.list img,
.other-list img {
    border: none;
    width: 125px;
    height: 125px;
    margin: 35px;
}

.row img {
    width: 40px;
    height: 40px;
    border: none;
    vertical-align: middle;
}

Answer 4 · 2014-09-13T21:10:11Z

September 13, 2014 9:10pm

Hampton,

Am i right in presuming the link to the page ctmg.us takes me to the old website? before these problems.

Because everything looks okay when i visit the site now.

EDIT: Hampton,

Ive viewed the code and see that the site that is live now is the site you have said your having the problems with, i compared the code you posted here to the actual code on the website and its the same.

I have to say it looks identical to the website i see in safari for me, no issues like you described above.

Answer 5 · 2014-09-13T21:29:50Z

September 13, 2014 9:29pm

I'm using Chrome for Mac Version 37.0.2062.120 and Safari for mac Version 6.1.6 (7537.78.2) the website appears identical in both.

http://ctmg.us/services.html

Answer 6 · 2014-09-13T21:50:16Z

September 13, 2014 9:50pm

When I view it on Safari 7.0.4, I see the icons sized at 125px x 125px aligned 3 in a row and the properly formatted green footer.

Answer 7 · 2014-09-13T22:32:58Z

September 13, 2014 10:32pm

Weird, this is how it appears for me in Chrome 37.0.2062.120: https://www.dropbox.com/s/n65ywdwz5tm3ouq/Screenshot%202014-09-13%2018.29.35.png?dl=0

https://www.dropbox.com/s/xa2yzo2l4jqtm9g/Screenshot%202014-09-13%2018.30.03.png?dl=0

Answer 8 · 2014-09-13T22:48:54Z

September 13, 2014 10:48pm

So we are both using the same version of Chrome and we are getting two different results, hmmm

You need someone else to check it out as its perfect for me, you could try an uninstall and install Chrome to see if that is a fix, of call someone you know and ask them to check it. Other than that i don't know, your code is good and it renders fine for me.

Answer 9 · 2014-09-13T23:06:14Z

September 13, 2014 11:06pm

Upon further investigation, the site loaded perfectly on my friends desktop and mobile versions of chrome and safari. The site , it seems, loads perfectly on every browser except for google chrome on my own desktop and phone. Very strange.

Answer 10 · 2014-09-13T23:12:54Z

September 13, 2014 11:12pm

Well on the plus side it gave us something to do all evening lol.

Glad its sorted.

Nice site BTW.

Answer 11 · 2014-09-14T01:01:36Z

September 14, 2014 1:01am

A similar thing happened to me with a project I was working on and it turned out, my Chrome was zoomed in from a previous browsing session. Maybe the same is happening here?

Welcome to the Treehouse Community

Looking to learn something new?

Hampton Dunlap

Hampton Dunlap

Icons not loading properly in chrome

11 Answers

louiecamacho

louiecamacho

Wayne Priestley

Wayne Priestley

Hampton Dunlap

Hampton Dunlap

Wayne Priestley

Wayne Priestley

Wayne Priestley

Wayne Priestley

Hampton Dunlap

Hampton Dunlap

Wayne Priestley

Wayne Priestley

Hampton Dunlap

Hampton Dunlap

Wayne Priestley

Wayne Priestley

Hampton Dunlap

Hampton Dunlap

Wayne Priestley

Wayne Priestley

Hampton Dunlap

Hampton Dunlap

Wayne Priestley

Wayne Priestley

louiecamacho

louiecamacho