Search code examples
cssinternet-explorer-9internet-explorer-10

What needs to be fixed for my layout to work with Internet Explorer?


I have a problem with a website layout. I noticed it isn't right when using Internet Explorer. You can see the live code at https://byra.ca

How it should be: How it should be

How it is with IE: How it is with IE

The problem is, I have no idea how to fix this. Anyone knows what css I am using that isn't compatible with IE and that is causing the issue?

I was able to test the website using IE9 and IE10. I don't know if the issue is also happening with IE11.

Thanks,


Solution

  • One quick way to fix this is to set an explicit min-height property on any of the three problematic divs:

    <div class="byra-block to-animate fadeInRight animated" style="background-image: url(/images/design/img_1.jpg); min-height: 500px;">

    If you can come up with an acceptable value for min-height for the three block divs, both Internet Explorer and other browsers should respect it.