Streaming live at 10am (PST)

Images and top Nav are missing in IE8


#1

I created a site using Webflow, http://clarilis.webflow.com/

It looks fine on most of browsers except IE8. The top nav bar and some images including the logo are missing. Anyone has an idea why this happens? How can I get this problem resolved?

Thank you very much!

Rain


#2

Webflow doesn't play nice with IE8. We keep 3 different windows machines with IE 7-8-9 installed to check compatibility at our agency. Browserstack would be easier, but this works for now.

  • When an element of a webflow site won't display in IE8, it's because you're using some HTML5/CSS3 property that IE8 doesn't know what to do with. SVG images (there are javascript fallbacks though), pretty much any CSS animations (although there are fallbacks as well), and some responsive grid features (IE8 actually doesn't recognize media queries whatsoever). Also, most background-images won't display properly, border-radius, any shading or text shadows won't work (you can use CSS3 PIE after you export to remedy some of this)

  • I know that Webflow does include a version of Modernizr, but I've found that sometimes you have to create a custom file and install it outside of webflow, or simply just use the html5shiv separately from Modernizr. This is required for IE8 because it doesn't recognize the nav tag, among other tags as well. You can also add this tag to your head which is has arguable usefulness, but I do it anyway: "meta http-equiv="X-UA-Compatible" content="IE=edge"

  • Check that when you shrink your webflow editor horizontally that the nav doesn't disappear or get funky. If you're testing the site on an IE8 virtual machine, the screen resolution may be very low which causes the items to get lost. It may be less of an IE8 thing and more of a hardware issue. (Don't just click the tablet icon, actually shrink your window as the layout could change in between full width desktop and tablet.

  • Also, if you're not using an IE8 virtual machine, make sure that it's not set to display in compatibility mode. Make sure (through IE dev tools) that it's set to display as straight IE8, and also ensure that Javascript is enabled.

  • I have had success with similar issues using display:inline as opposed to display:inline-block

Good luck, hopefully IE8 will be eradicated from the planet soon, like smallpox. We are legend.


#3

Weird, it's working fine for me with IE8.

I see a black nav bar with phone number, login and greenish button. Nice logo too.


#4

Hi Rain - I know it's been a year since you posted this but I wanted to find out what you had done to address the IE8 issues you came across?

Thanks so much - JFly


#5

(copied from my other forum post)

I think I figured this out! It seems that the "brand" element in the Webflow navbar has a width of "auto". If you keep it set to auto, it won't display in IE8. After adding the logo image, I simply set the width of the "brand" element to match the width of my logo image and, IT WORKS!


#6