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!
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
Sarah Hoopes
6,304 PointsImage Size and Internet Explorer
I finished my first website, but it doesn't work in Internet Explorer. The images are too big and the layout is off! It's fine in Safari, Google and Firefox.
This is the website: www.mainefishproductions.com
My images are scaled down using css. Should I go back and make the original files match the css sizing? Will that help?
This is my first site and realize the issue might be too complicated to solve in a forum. I probably made a lot of mistakes...
Thanks!
4 Answers
Chris Shaw
26,663 PointsHi Sarah,
I assume you're talking about IE8 which needs an extra piece of JavaScript as it doesn't support HTML5 elements such as nav, the file you need is the html5shiv. All you need to do is simply add the below code to just before your closing head tag and your page will work correctly.
<!--[if lte IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
To give you a little background, this code will only execute in Internet Explorer, what it's doing is checking is the browser is IE 8 or below which will load and execute the html5shiv. The html5shiv itself is a polyfill which in real time creates the nav element for example using the document.createElement method which is built into all versions of IE.
Happy coding!
Sarah Hoopes
6,304 PointsThanks Chris!
I gave it a try, but I think there might be another issue. I appreciate the suggestion and I'm sure that it will be helpful in the future!
Chris Shaw
26,663 PointsCould you please update you live site just so I can ensure you added the above correctly, I ask because your code is fine apart from the lack of HTML5 elements in IE8 which the script fixes.
Sarah Hoopes
6,304 PointsOk I did it! Sorry, I just tested it earlier through the Treehouse workspace. I don't have IE at home to see if it worked, but I can check it out tomorrow.
Thanks again!
Chris Shaw
26,663 PointsHi Sarah,
I just checked it in IE8 and aside from a minor issue with the image widths in the navigation it's working now, to resolve the last issue you simply need to declare an absolute width to the nav a img selector as IE8 doesn't add padding correct to img elements.
nav a img {
height: 80px;
width: 140px;
margin-right: 1em;
margin-left: 1em;
padding: 10px;
}
Once that change is made it works as expected.
Happy coding!
Sarah Hoopes
6,304 PointsYes, I just checked it and it works! THANK YOU!
Chris Shaw
26,663 PointsGood to hear and my pleasure.
Chris Shaw
26,663 PointsChris Shaw
26,663 PointsHi Sarah,
Did you manage to have a look into whether the issue is resolved from your end?