Menu icon Foundation
Problem with foundation and Internet Explorer

I hope someone can help me. I'm working in the design of a site for real estate. I'm working with foundation 5, it works good in chrome and firefox for mac but when I test the site in firefox and Internet Explorer 11 in a PC it looks weird. I haven't test it in olders versions of those browsers in PC yet.

I have the site in https://dl.dropboxusercontent.com/u/78083017/casinoPlaza/plantas.html

The problem is in the tab panel with the floorplan.

I've added 3 screenshots with how it looks in Internet Explorer 11, Firefox 26 and the latest version of Chrome in which looks like it should look in the other browsers.

Only the left side menu is working. I really don't know how to solve the problem because I don`t know where the problem is. I hope someone can help me figure out the problem and how to solve it.

Thanks in advance for any help.

Ie11

Firefox

Captura de pantalla 2014 01 02 a la s  0.42.47

Foundation 5Internet Explorercss

I hope someone can help me. I'm working in the design of a site for real estate. I'm working with foundation 5, it works good in chrome and firefox for mac but when I test the site in firefox and Internet Explorer 11 in a PC it looks weird. I haven't test it in olders versions of those browsers in PC yet.

I have the site in https://dl.dropboxusercontent.com/u/78083017/casinoPlaza/plantas.html

The problem is in the tab panel with the floorplan.

I've added 3 screenshots with how it looks in Internet Explorer 11, Firefox 26 and the latest version of Chrome in which looks like it should look in the other browsers.

Only the left side menu is working. I really don't know how to solve the problem because I don`t know where the problem is. I hope someone can help me figure out the problem and how to solve it.

Thanks in advance for any help.

Ie11

Firefox

Captura de pantalla 2014 01 02 a la s  0.42.47
Stephen Welch over 5 years ago

I had the same issues with this. IE 11 was horrible, and so far the only temp fix I have found is to add
inside the header to force IE to render compatability.

Wing-Hou Chan over 5 years ago

Inspecting your code (in Firefox 26) reveals some of the main problems.

Your <section id="menu-proyecto"> is out of the grid. This means your rows and columns within <section id="features-plantas"> will overlap <section id="menu-proyecto"> on smaller screens as Foundation will maintain the grid and as <section id="features-plantas"> comes later in your HTML, it will go on top.

I assume you want a responsive site, since this is what Foundation is for. If you test your site on smaller screens you will see the problem I am experiencing above.

What you want to do is place <section id="menu-proyecto"> inside the grid. For example

<div class="row">
 <div class="small-3 columns"> <!--     <------------- Here -->
  <section id="menu-proyecto"> 
   <ul class="side-nav">
    <li><a href="index.html"><img src="img/logo-casino-plaza.jpg" alt="Casino Plaza - Viña del Mar"> </a></li>
    <li><a href="index.html" class="btn">Home</a></li>
    <li><a href="plantas.html" class="btn">Plantas</a></li>
    <li><a href="video.html" class="btn">Video</a></li>
    <li><a href="ubicacion-y-entorno.html" class="btn">Ubicación y Entorno</a></li>
    <li><a href="detalles-y-equipamiento.html" class="btn">Detalles y Equipamiento</a></li>
    <li><a href="contacto.html" class="btn">Contacto</a></li>
   </ul>
  </section>
 </div>  <!-- <------------- Here -->
 <div class="small-9 columns"> <!--            <------------- Here -->
  <section id="features-plantas">
<div id="plantas-wrapper">
<div class="row">
<div class="large-12 columns">


    <dl class="tabs" data-tab>
      <dd class="active"><a href="#panel2-1">Planta 1</a></dd>
      <dd><a href="#panel2-2">Planta 2</a></dd>
      <dd><a href="#panel2-3">Planta 3</a></dd>
      <dd><a href="#panel2-4">Planta 4</a></dd>
    </dl>

    <div class="panel radius">

    <div class="tabs-content">
      <div class="content active" id="panel2-1">
  <div class="large-6 medium-6 columns">
        <a  href="#"><img src="img/plantas/planta-3d-2b.jpg"></a>
    </div>
    <div class="large-6 medium-6 columns">
      <h5 class="subheader">Planta 1 Dormitorios / 1 Baños</h5>
      <img src="img/plantas/esquicio_big.jpg">
</div> <!--  <------------- Here -->

Unfortunately I can't build the whole site for you and then debug it and I can't commit all my time and resources into solving this problem.

Try out the above solution first. It won't solve all your problems within the code but it is a start. Once you've done that post an image of the result and I'll see what we'll do next. The I've provided isn't strictly valid, as I haven't thoroughly gone over it, but it's supposed to give you the main idea. Look for the comments to see what I've added.

Your column logic throughout is a bit quirky and that's why the site isn't rendering properly.

// Edit Revisiting your site on 3rd Jan, I see you've sorted out some of your columns! :D It's looking better but your tabs are still overlapping the sidebar menu.