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

CSS

Posted by Zach Allan
Zach Allan
19,452 Points

Need help with CSS issue in Internet Explorer!

I am working on a website and doing some testing in IE9.

I have a slideshow section built with a jQuery plugin. Some look like this (correctly displayed): http://i.stack.imgur.com/DbcP5.jpg And others look like this: http://i.stack.imgur.com/wXEMU.jpg

The button is cut off and the last name from the quote doesn't display. I have narrowed down my issue to be due to the amount of words used in my h2 (when I use less it fits. When I use more it displays weird). In other browsers such as Chrome it somehow makes all the words fit and keeps the same font-size. How do I make this work in IE9?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Backwards compatibility for IE is a real nightmare for developers, especially before IE8. Clients I've worked for do not go lower than IE8, so I'm a bit curious why you're developing for IE7.

I have not tested this on IE7, but hopefully this will get you going in the right direction. Source: Bootstrap

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Good luck.

Zach Allan
Zach Allan
19,452 Points

I put that conditional CSS in my markup, loaded it up on IE7 and I'm still getting the same issue. You're right. Backward compatibility for IE is a complete nightmare.

2 Answers

Kim Cowart
Kim Cowart
32,918 Points
Kim Cowart
Kim Cowart
32,918 Points

Hey Zack,

Did you try a CSS reset with normalize?

This vid was helpful I thought for cross browser consistency

http://teamtreehouse.com/library/build-a-simple-website/creating-a-website-structure/css-reset-2

Hope it hleps

tobart
tobart
13,518 Points
tobart
tobart
13,518 Points

Hey Zack, sorry for my late reply. Not really sure what’s the specialities of ie7 in this case, due to the fact i stop at ie9 (ah saw that it is ie9). but seems to to me to be a problem with overlfow of the container? did you set fixed units to the elements. probably you can try a version with fixed pixels and work your way up from this way to narrow down the search. might also be a problem in terms of relative font-sizes? you have some css and html for us?