Browser Compatibility Issue

Design help General
1

90% of my website is finished but just noticed that on firefox and IE10, there is a compatibility issue.
on IE the alignment and the font changes while firefox, the buttons move in directions they should not.
Chrome views everything correctly.

Someone please help me! How do I get IE and Firefox to view the same as Chrome?

TroubleShoot me: https://webflow.com/design/edgemine?preview=8d65f85ad6de6d4b2ed836eb6b2cf68b

2

Hi Vinsuh! Can you publish your website to your subdomain? I want to test it out live on those different browsers to see what’s going on.

3

Thank you for the quick reply!

http://edgemine.webflow.com

4

What are you talking about specifically in our design? Right now a lot of your elements inside the Footer class are fixed and overlap a lot of the content on the page. I would put the social icons in the Nav bar so they don’t overlap the nav links. (So they go with the natural content flow instead of being fixed and overlapping content).

Your site looks great on big screens, but as you get smaller these elements overlap. There may be a better strategy so that these don’t.

5

Thanks for the idea. I’ll try that out!

But for the previous question about viewing it IE10…
If you look at the header section, the font size has changed and the orange bar floats on it’s own.
Any idea why this only happens on IE?

6

Can you post screenshots of what you see in IE10 and what it looks like in Chrome/Firefox?

7

3229×125 125 KB

Left is CHROM and the right is IE10
the font on the nav are different.

8

That’s odd. I checked it on IE10 and It looks fine for me. Maybe try to do a hard refresh CRTL+SHIFT+R. It may be a caching issue.

9

I’ll check on a different computer and see if it is the computer I am using.
Thank you for the reply.

10

hi sergie, also mine has the same problem with fire fox and ie10, some of the elements are not showing. for example in chrome the ajax loader is n the right size but in firefox and ie10 its showing different size and the main screen for the hero section. in chrome it is showing (what i do isnt work etc) in firefox its not

can you please take a look at it. im almost done with it. this is the last thing preventing me from migrating it to my own domain.

heres the link+
https://preview.webflow.com/preview/archiemoralesdesign?preview=7c2b0dcdf611ce605f9c984e83342c0c

thanks

11

Hi @Archilles_Morales, so the loader and hero section is the elements not displaying correctly, is that correct?

I noticed you are loading the css in the body inside an html embed widget. You might instead try to load the css in the Header of your site in Custom Code: Custom code in head and body tags | Webflow University.

I am still checking it out though, to see if I can pinpoint the exact cause. Cheers, Dave

1 Like
12

hi dave is there any update on this

thanks

13

hi guys it been 3days since ive last heard from this thread any updates?

14

Hi @Archilles_Morales, thanks, I took a look at the site and I think the issue is in the custom css that is being used on the div’s something is not getting translated by firefox correctly. My next suggestion is for you to remove the css from the embed widget and put it to the Header of your site instead. Custom code in head and body tags | Webflow University

After making changes, republish your site.

Try that and then see how it works.

Cheers, Dave

15

thanks dave, its resolved now. it is showing in all browsers again

1 Like