Menu icon Foundation
Website messed up on IE and Firefox

Hi All,

Very frustrating problem on IE and Firefox. Both websites seems to have major problems with the layout and css of the website. 

What I did was update the site to the newer version of foundation a few months ago but have only just noticed these are messed up on those two browsers!

 

Here's the site link http://www.customlogoshop.com

My blog on the otherhand - works okay http://www.customlogoshop.com/blog as this is the previous version of Foundation. 

Really can't get my head around what is wrong here. 

Thanks

Displaying image.pngIE Messed up

firefoxInternet Explorer

Hi All,

Very frustrating problem on IE and Firefox. Both websites seems to have major problems with the layout and css of the website. 

What I did was update the site to the newer version of foundation a few months ago but have only just noticed these are messed up on those two browsers!

 

Here's the site link http://www.customlogoshop.com

My blog on the otherhand - works okay http://www.customlogoshop.com/blog as this is the previous version of Foundation. 

Really can't get my head around what is wrong here. 

Thanks

Displaying image.pngIE Messed up

Luke over 1 year ago

bump

John Vedral over 1 year ago

I can't tell from your screenshot what may be wrong, however, I can tell you what I would do to fix it.

In production:

  1. I would restore a backup of the site from when it last functioned properly so that my production site was working again.

Then back to development:

  1. Make sure that I am using the standard grid instead of flex grid.
    • I have found the flex grid to be too cutting edge for many browsers.
  2. Comment out the uncss line in my gulpfile if needed.
    • If I am using something like the ZURB Template, the uncss optimizations can cause some misbehaviors. I comment it out in my projects.
  3. Check the divs to make sure that they all match up with a partner.
    • I have found that many layout issues come from mismatched divs. Each browser behaves differently when rendering a page with broken tags.
  4. Take each component, one by one, refer to the Foundation 6 documentation and fix them one at a time.
    • Check callouts, columns, orbits, etc to be sure that you have all of the correct breakpoints and other code.
  5. Compile to production code.
    • Production code may sometimes behave differently from the unoptimized development code.
  6. Publish to a temporary area on my production server.
    • I always want to see how things act under the production web server, so I send the code to a development folder on the server before copying it to the production folder.
  7. Test with as many different web browsers as possible on mobile devices, laptops, and desktops.
    • Make a checklist: Chrome, Chromium, Firefox, IE, Opera, Safari, smartphone browsers, tablet browsers, and on and on.
  8. Repeat steps 4 through 7 until the results are satisfactory.
    • I rarely get it right the first time.
  9. Publish to production.
    • Success! Or at least good enough.

James Stone over 1 year ago

Looks like you fixed it. What was the issue?

Perhaps you are using ZURB Foundation 5 and used bower update and got ZURB Foundation 6. That is just a wild guess though.