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 Ricardo Rodriguez
Ricardo Rodriguez
2,749 Points

IE Problem

Hello,

I'm having issues with Internet Explorer on a site I'm designing for my internship. Apparently on IE9 or so, the site breaks - the slider doesn't work anymore, the grid is off completely.

The mobile div I made is the one showing up. I'm confused...

Here is the link: http://praxart.com/fhhi/index.html

I'm thinking it might be the way the CSS is linked to the HTML. That's my first guess, because the JavaScript isn't working, either. I'm not sure though what's making it break like this.

Any help is appreciated, thanks!

4 Answers

Eric Ellenbrook
Eric Ellenbrook
9,006 Points
Eric Ellenbrook
Eric Ellenbrook
9,006 Points

I notice that you have your normalize.css after your style.css. Could your normalize be resetting something that you've coded in your style.css? Also can you post a screenshot of what exactly is happening?

Also I see that you're using flexbox for the slider. ie11 is the only ie browser that fully supports flexbox so I'd use something different if you want support in older versions of ie.

Ricardo Rodriguez
Ricardo Rodriguez
2,749 Points
Ricardo Rodriguez
Ricardo Rodriguez
2,749 Points

Hey, sorry for the very late reply - school can be murder.

Okay, here are some screenshots of what is happening. You can view the issue live when in compatibility mode for IE.

http://oi60.tinypic.com/sl17i8.jpg

http://oi60.tinypic.com/2u60a68.jpg

There's two solid screenshots of issues. Again, if you view it in Chrome or any other browser, the site works perfectly fine. The mobile navigation works and everything.

I can look for a workaround for Flexbox, but in the meanwhile, I desperately need a solution and an understanding as to why IE is acting up and what I can do about it. :/

Eric Ellenbrook
Eric Ellenbrook
9,006 Points

I'd stop using flexbox for one. There are plenty of other options you can use for sliders that will work with IE 9 and up.

Also I'm 99% certain that the rest is messing up is because IE doesn't handle floats very well. Floats are meant to be used to float an image and inside of an article to give a magazine type of appearance and NOT for layout. In order to align elements horizontally you should be changing their display property to inline-block because that is exactly what that is made for. To align properties in a line. So instead of float: left on two elements, you can use display: inline-block; on them and you'll see that it acts the same way but on all browsers.

This seems to be an unpopular opinion for some reason but if you read the HTML spec for float you'll see that it is 100% correct.

http://www.w3.org/TR/CSS21/visuren.html#floats You'll see that it has no mention of actually floating content containers. Only bits of content inside of a container.

More info regarding floats from w3c: http://www.w3.org/wiki/Floats_and_clearing

Here is some info regarding inline-block: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Here's a post on Stack Overflow: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell

As you can see, using inline-block is far superior and also works much better in a cross-browser situation.

Ricardo Rodriguez
Ricardo Rodriguez
2,749 Points
Ricardo Rodriguez
Ricardo Rodriguez
2,749 Points

That definitely hits the nail on the head. I've updated the site, and the navigation bar works perfectly now in internet explorer. I've read through the tutorials you gave, and I'm currently struggling with two parts:

The navigation is aligned perfectly fine now, but here I'm not finding any floats that are particularly problematic. Is it perhaps that I didn't contain things in the proper div? Maybe the "grid.css" file is not exactly adjusted right to display inline block? I'm not sure, then, how to place these on the same line and it not fall under like that.

  • A similar issue occurs but with the width of the containers on the bottom as it becomes mobile, as the picture I posted earlier points out. I don't find any floats anymore in my CSS, but maybe I need to use the "display: inline-block" specifically, or maybe it's my HTML.

Either way thank you SO much for the fix!

Eric Ellenbrook
Eric Ellenbrook
9,006 Points
Eric Ellenbrook
Eric Ellenbrook
9,006 Points

One thing I'd suggest doing is using the developer tools in your browser to highlight the problem. If you press F12 you will see that it brings up a console (I'm using Chrome) .

On the left of the console is your HTML code. On the right the "styles" tab is selected which shows the CSS being attributed to the selected element on the left. (again, this is in Chrome).

If you right click on the area you're having trouble with and choose "inspect element" it will change that console to the item. You may have to go a bit deeper into the code or even less deep in order to narrow down the problem. If I had to guess I'd say that you need to find the wrapper container and see what the width is on that. If it's not as wide as it should be that will limit the element from going all the way to the right side edge like you want.

Edit: it looks like the grid is floated left so that might be causing the issue. Again, IE is a son of a gun to deal with so there might not be much you can do.

Jeffery Zeldman is of the mind set that every site doesn't have to look exactly the same in every browser as long as the content is readable. Sometimes you just can't make things look the same and that's okay.