Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Beginner HTML, bug question

I'm creating my own webpage while working through the Front End Develop track to help the learning "stick" and have hit a snag I can't seem to figure out. I've created a page with my son's favorite sports teams in circle button png links across the nav bar. I got the first five in just fine, but the last two wouldn't display the picture in IE, I quadruple checked every character in the code and css and they are identical to the pics before them that display.

Weirdest thing is I changed default browser to Chrome and the pics/links display just fine. I switched back to IE and still the same problem. I'll gladly post the code, but since it works in Chrome but not IE I was thinking somebody with more experience may know what the issue is?

For info, the #dbacks button below is the last one to work in both IE and Chrome, the next two (#Martha and #logo_legends) only show in Chrome.

Any advice would be greatly appreciated.

#dbacks {

  float: left;
  margin: 0;
  padding: 0 35 0 35;
  width: 5em;

}

#martha {

  float: left;
  margin: 0;
  padding: 0 35 0 35;
  width: 5em;

}

#legends {

  float: left;
  margin: 0;
  padding: 0 35 0 35;
  width: 5em;  

}
<div id="dbacks">
      <a href="http://arizona.diamondbacks.mlb.com">
      <img src="pics/dbacks.png" alt="AZ Diamondbacks logo"></a>
  </div>
  <div id="martha">
    <a href="http://stmarthaschool.org">
    <img src="pics/stmarthaworking.png" alt="cloverleaf pic"></a>
  </div>     
  <div id="legends">
    <a href="http://legendssportsacademy502.com">
    <img src="pics/logo_legends.png" alt="LegendsSportsLouisvillelogo"></a>
  </div>

<div id="dbacks"> <a href="http://arizona.diamondbacks.mlb.com"> <img src="pics/dbacks.png" alt="AZ Diamondbacks logo"></a> </div> <div id="martha"> <a href="http://stmarthaschool.org"> <img src="pics/stmarthaworking.png" alt="cloverleaf pic"></a> </div>
<div id="legends"> <a href="http://legendssportsacademy502.com"> <img src="pics/logo_legends.png" alt="LegendsSportsLouisvillelogo"></a> </div>

What version of IE are you using?

Dave McFarland
Dave McFarland
Treehouse Teacher

To put code into a forum post use triple back ticks -- ``` — around the code. I fixed your code here, but in the future here's a forum discussion that describes how to add HTML, CSS, JavaScript or other code to the forum: https://teamtreehouse.com/forum/posting-code-to-the-forum

Trying to find it

Thanks for fixing code Dave.

4 Answers

Internet Explorer 11

Using Sublime 2 for a text editor

Internet Explorer 11

Using Sublime 2 for a text editor

Internet Explorer 11

Using Sublime 2 for a text editor

On a whim I changed the last two pic files from .png to .jpg and they now work on both IE and Chrome...weird. The other previous four pic files are still .png and work on both navigators.