Making website compatible with IE (and other non Chrome browsers)

Hello,

I took some time to look over your template issues and also looked over the boemia demo template. In trying to make sense of it I’m wondering if there might not be some issue with your site’s css related to the mobile responsive stuff like bootstrap, etc. The demo site scales pretty well, paragraphs are all seen with no side to side scrolling needed. The current site seems like the paragraphs and div’s are ‘stuck’ at a wider view when the screen is sized down. Also, the mobile menu doesn’t appear and the search box should be popping to the top on smaller screen sizes like in the demo.

I wonder if some of the css didn’t quite get applied assuming it’s a child theme that’s activated? Or perhaps theres some custom mods to the css that are interfering/disabling the bootstrap css that the demo site has.

There’s some different ways to approach the issue. One would be to contact the template provider and ask them for assistance directly. It could be they will know real quickly where the issue lays. Perhaps by providing them with a login to see.

Second way, I’d recommend removing any css modifications made to the template after installation temporarily to see if it fixes the mobile menu and the div’s scaling down properly. If it does, then re apply customized css one by one until you see the problems reappear. It just seems like something’s missing or something is interfering with the way the template responds. I was about to chalk it up to the template provider as the problem, but the demo site seems to work well.

On the lesser issue of the icons not appearing in a neat row in IE, it seems that since the block of icons was done using spaces instead of css padding, there’s one two many spaces in between the icons for IE’s taste. Even though the template width should be standard in all browsers, for some reason, IE feels there’s too much and drops the last icon to the next row. When i remove some extra spaces via the firebug inspector the icons all line up in ie.-which is an easy fix ??

However, the mobile menu missing, the search box being to the right of the logo, and the paragraphs running off the page rather than staying within the browser window are indicative of some custom css interference or some css missing, etc. Sorry for the long message, but this is my best guess. Any one else is welcome to chime in ??

Please keep me posted ??

Best Regards,
Danny

Hi Danny,
Thank you SO much for your comprehensive response!

In terms of custom CSS i’ve added nothing other than what came with the theme (e.g. I’ve not manually added in any extra style code myself).

I contacted the theme developers a few days ago about this because the site looked terrible on mobile and they told me to add the following code:
@media (max-width: 767px) { .slides { height: auto !important; } }

Once I added the code it removed some of the issue with how the mobile site looked but didn’t fix things like the icons being on different lines etc so I just decided to turn of the responsive mode all together which is why the mobile menu is missing.

The other issues however I have no clue about. I’ve told the theme developers that there are still issues with how the site looks in different browsers but have not yet heard back :s (although to be fair it is the Christmas period).

In terms of the icons on the homepage Danny would using padding be more effective than using spacing. I just did that as a quick fix and used Chrome as my reference point for the icons being equally spaced.
If I remove some of the spaces manually to bring it all to one page on IE then I assume it won’t be centrered properly when viewed in Chrome (as it is presently) so it would be great if you knew a way I code put them all spaced within one line and then centred. I tried using the centred alignment tool in the editor however this just puts the icons centred all on separate rows (sorry I’m missing the point here and asking a very simple question!!)

Thanks!
Ore

Hello Ore,

On the icons in a row – the spaces work ok, but i would center the icons. Sometimes the html wysiwyg editors create dirty code that is irritating. I would toggle to the html view of the page and find the area where the icons are. It will look something like this…

<p><a>icon</a>lots of spaces<a>icon</a>lots of spaces<a>icon</a>lots of spaces<a>icon</a>lots of spaces</p>

add style=”text-align:center;” to the paragraph tag like so…

<p style="text-align:center;"><a>icon</a>lots of spaces<a>icon</a>lots of spaces<a>icon</a>lots of spaces<a>icon</a>lots of spaces</p>

It should center all the icons. then get rid of some of the spaces inbetween so that in IE it’s all on one line.

Alternately you could use span3 classes and edit the padding in the css instead of the above … but i would wait until the template provider can help you work out the real issues behind the mobile responsive css not working right.

I’d be interested in seeing what it looks like with the mobile responsive option turned back on. The css they gave you just seems like it changed the slides area and nothing else. It still seems like some css is disabled in comparison with the demo site. This to me seems like the bigger issue that needs to be worked out. Usually if the mobile responsive css is working like in the demo, then any layout changes that need to be done to fix any customizations can be done in such a was as to avoid breaking the mobile responsiveness.

Keep me posted ??

Best Regards,
Danny

Hi Danny,
Thanks for that! Worked perfectly!!
Now I just have to hope the theme developers will be able to easily rectify the potential missing CSS issue.

Will keep you updated ??

Thanks again!

Awesome! Glad to hear it helped ?? Let me know if there’s any more ideas or help i can provide.

Danny ??

Well It’s been a couple of days now and still no answer from the theme developers (by far the worst theme support i’ve received especially as I paid for a premium theme!).

I’m really behind schedule in being able to start promoting the site as I’m holding back because of the fact that I can’t be sure whether people will view it in a non-chrome browser and therefore have a negative view of the company because of the page errors.

Is there a quick fix at all to try and get the pages to resize to fit the alternative browsers – like is there any code that can be added which says if viewed on X adjust screen to X% of the normal amount? Or something that can be added to fix the fact that the paragraphs are stuck at wider view??
Any suggestions would be amazing as I have no clue when the theme developers will come back with an answer for me ??

THANKS!

Hello again,

I feel your pain ?? I took a few minutes to look again and I think i found one of the major problems. There is a missing classs called “responsive” on the <body> tag. I remember you mentioned you had disabled responsive mode in your template. I would definitely recommend turning it back on. I installed boemia’s free version to a localhost and once i did, the template bootstrapping worked as the demo site. Once you enable this it will clear up a lot of issues as i can’t get it to display right even in chrome at the moment. Once this is done, check if the “responsive” class has been added to the <body> tag. If so and the responsiveness is back, then see what doesn’t display correctly in other browsers. Only after reenabling this do i think you’ll find the source of any other issues. but I’m pretty sure almost 95% of them should be gone. Let me know ??

Danny