Menu icon Foundation

My Posts


  • 2
    Replies
  • IE 11 in compatibility mode

    By Randy Morris

    version 5.3ie11

    I made a couple of online newsletters in 5.3 and just found that they don't render properly in IE 11 in Compatibility Mode. Does anyone have an idea of why this is a problem? Link to <a href="http://laborcommission.utah.gov/email/q22014/index.html">newslwetter</a>.

    Last Reply by dytto123 over 1 year ago



My Comments

Randy Morris commented on Guy Van Bael's post over 4 years

For touch a:hover doesn't work, because that's a mouse funtion. Every place that you use a:hover add a:focus and see if that doesn't solve your problem.

Randy Morris commented on Randy Morris's post over 4 years

One other thing I forgot to mention. When switching to the block-grid layout, the top nav bar pushed the page content down when a dropdown would occur. That's why I switched back to the column layout.

Randy Morris commented on Randy Morris's post over 4 years

Hey Rafi, I figured it out. The solution was to remove "display:inline-block" and replace it with "float-left" in the CSS. It looks just like I wanted it to now. Take a look. http://laborcommission.utah.gov/

Randy Morris commented on Randy Morris's post over 4 years

I figured this one out. It simply required a change in the meta tage to:
.
Content ="IE=Edge"/ > would also work.

Randy Morris commented on Randy Morris's post over 4 years

The fixed heights are required to keep the boxes uniform for the layout. I had them as "rem" values instead of "px" values originally, but changed to the fixed "px" values in an effort to see if that was the issue.

My original layout worked well for the spacing. I was using a hover effect on the images, but that didn't work well even with Modernizr on iPads. It was when I switched to the off-canvas-menus that the layout broke on Safari.

I tried your idea of the block grid. but there was no change.

Any other thoughts out there?

Randy Morris commented on Sader Neoklis's post over 4 years

I've found that using a list with radio buttons to be easier and cleaner for creating accordions. Here's a quick example:

<ul class="accordion"> 
  <li><label for="panel1">Label1</label><input id="panel1" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 
  <li><label for="panel2">Label2</label><input id="panel2" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 
  <li><label for="panel3">Label3</label><input id="panel3" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 

</ul>

Then you can add a transition to the div holding the content like this:

.accordion li > div {
    display: none;
    overflow: hidden;
    transition: height 0.3s ease-in-out 0s;

The full page that this code comes from is an FAQ page that I did for the Utah Labor Commission:

http://laborcommission.utah.gov/FAQ/faq_cob.html

Randy Morris commented on William Possidento's post almost 5 years

Anything that is content belongs in HTML. I think you're confusing 2 different entities. I don't think "&#160;" is valid. "&nbsp;" is a non breaking space, as well as "%20" . Try either of those.

Posts Followed


Following

    No Content

Followers

My Posts



My Comments

You commented on Guy Van Bael's post over 4 years

For touch a:hover doesn't work, because that's a mouse funtion. Every place that you use a:hover add a:focus and see if that doesn't solve your problem.

You commented on Randy Morris's post over 4 years

One other thing I forgot to mention. When switching to the block-grid layout, the top nav bar pushed the page content down when a dropdown would occur. That's why I switched back to the column layout.

You commented on Randy Morris's post over 4 years

Hey Rafi, I figured it out. The solution was to remove "display:inline-block" and replace it with "float-left" in the CSS. It looks just like I wanted it to now. Take a look. http://laborcommission.utah.gov/

You commented on Randy Morris's post over 4 years

I figured this one out. It simply required a change in the meta tage to:
.
Content ="IE=Edge"/ > would also work.

You commented on Randy Morris's post over 4 years

The fixed heights are required to keep the boxes uniform for the layout. I had them as "rem" values instead of "px" values originally, but changed to the fixed "px" values in an effort to see if that was the issue.

My original layout worked well for the spacing. I was using a hover effect on the images, but that didn't work well even with Modernizr on iPads. It was when I switched to the off-canvas-menus that the layout broke on Safari.

I tried your idea of the block grid. but there was no change.

Any other thoughts out there?

You commented on Sader Neoklis's post over 4 years

I've found that using a list with radio buttons to be easier and cleaner for creating accordions. Here's a quick example:

<ul class="accordion"> 
  <li><label for="panel1">Label1</label><input id="panel1" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 
  <li><label for="panel2">Label2</label><input id="panel2" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 
  <li><label for="panel3">Label3</label><input id="panel3" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 

</ul>

Then you can add a transition to the div holding the content like this:

.accordion li > div {
    display: none;
    overflow: hidden;
    transition: height 0.3s ease-in-out 0s;

The full page that this code comes from is an FAQ page that I did for the Utah Labor Commission:

http://laborcommission.utah.gov/FAQ/faq_cob.html

You commented on William Possidento's post almost 5 years

Anything that is content belongs in HTML. I think you're confusing 2 different entities. I don't think "&#160;" is valid. "&nbsp;" is a non breaking space, as well as "%20" . Try either of those.

Posts Followed

Following

  • No Content

Followers

  • No Content