IE 7 and Older Browsers [possible to style separately? – RESOLVED]

This topic contains 10 replies, has 2 voices, and was last updated by  Sebastian 6 years, 3 months ago.

Author Posts

yazo

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

Hello Sebastian,

First of all many thanks for your very helpful tips and suggestions.

Question, is it possible to style separately for older browser using your tools? Take a look at my site – http://misserviciosusa.com/ – if you look at it with modern browsers it looks great. However not so good with IE 7,8, etc. And if you notice (viewing it on IE 7&8) the following occurs:
1. Navigation links get pushed down to the next line
2. Google fonts not applied
3.Youtube Video (front page) gets pushed down.
4. Content and image blocks get pushed down and don’t aligned properly

Again is there a way to style differently for those browsers so they look as good as Firefox,chrome, etc?

Thank


yazo

Any help? I noticed that my post has gone unanswered while others have been answered during the same time period. Again Please, is there a way to style differently for those browsers so they look as good as Firefox,chrome, etc? Perhaps have Mircothemer have an option to style differently for older browsers.

Looking forward to your response, thank you again.

yazo


Sebastian

Hi Yazo,

Please accept my apologies on the lack of response. I make a point of answering every forum post promptly. When I saw your post before I intended to quickly make some updates to Microthemer and then just tell you to upgrade to solve your problem. However, I must’ve got side-tracked with that task and then forgot to respond.

I was thinking I could add some IE version specific textareas to the Custom CSS area (so you would have tabbed Custom CSS areas instead of just the regular single one). That way you can easily apply CSS styles that only target certain versions of Internet Explorer. You would need to write raw CSS code with this solution. I think it would be too messy to try to incorporate browser targeting with the regular UI CSS fields.

Does that sound acceptable?

Cheers,

Seb


yazo

Hey Sebastian!
No worries 🙂

Yeah that would be really great if you can incorporate a “tabbed custom CSS areas” for us to select certain versions of IE (just like you mentioned). Only one thing, I am not anyway good at writing raw CSS as the reason why i bought Microthemer (to allow us to select CSS elements and styling them without knowing CSS). Yes, if you could PLEASE find a way to allow us to target those CSS fields perhaps in a different window (so it doesn’t get messy) or some other solution that would be great. Let me know if this is possible.

I appreciate your help Sebastian.
Thank you
yazo


Sebastian

Hi there,

The best I can offer is a workaround. Once I’ve updated the IE specific custom CSS areas I’ll write back here with some instructions on how to overcome the problem without writing raw CSS. Hint – it will involve creating via the UI and then copying and pasting Microthemer-generated code into the relevant IE CSS textarea.

I should be able to roll out the new Custom CSS feature tomorrow.

Cheers,

Seb


yazo

Hello Sebastian,

Yeah that sounds good. Looking forward to trying this out.
Appreciate the help. I will let you know how this goes.

Thanks,
yazo


Sebastian

That’s great. I’ll write back here soon. Sorry I didn’t get onto it yesterday. I’m still battling a bug where the save button doesn’t work under some conditions. Bugs must take priority. But as I mentioned, your IE textarea update isn’t a major update so shouldn’t take me long.

Cheers,

Seb


yazo

Hello Sebastian,

Thanks for the update. Yes, looking forward to the update. 🙂

yazo


Sebastian

Hey Yazo,

I’ve released an update (2.4.5) that now has the IE specific textareas we discussed. Here’s what you can do if you don’t want to type raw CSS code into them:

Tip: Use your regular modern browser to edit styles using Microthemer and have Internet Explorer open in another window – refresh to see changes. Microthemer can’t be used with old versions of IE, and is quickest in chrome/firefox etc.

1. In Microthemer, create a new section called “IE 7 Specific”, or “IE 8 Specific”, or create both sections.
2. Use the Microthemer UI to set styles that improve the display in whatever version of Internet Explorer you’re targeting. Don’t worry if it messes up the display in firefox or chrome for now.
3. When you’ve added various selectors to your IE specific section and things are looking good in the target IE version, click the view CSS link on the right to display the CSS code Microthemer generates.
4. Scroll through the CSS code until you find the relevant section of code. It should be easy to find because it will have something like this at the top:

/* =IE7 Specific
————————————————————– */

5. Select and copy the code for the section (you stop highlighting code when you see another section marker like the one above, or you will get to the end of the stylesheet)
6. Paste the code in the relevant textarea in the Hand Coded CSS textareas section (bottom of the standard view or accessible from the { } popup icon in the visual view).
7. Save your settings
8. Tick the checkbox to the right of the section name. In the visual view, you will need to open up the Manage Sections popup to see the checkbox.
8. On the fixed menu on the right, tick the export to micro theme option and then select “New” from the dropdown menu. Give the export the same name as the section e.g. “IE7 Specific”.
9. Click the Save button. This will create a backup of the section.
10. Delete the IE specific section and then save your settings. If you ever want to edit the IE specific styles without digging into the CSS code you can re-import the IE specific section using the “Merge” method, make your edits, copy and paste again, export again, and finally delete again (although you might find editing code easier than coding from scratch).

Note: The browser version emulation tool in Internet Explorer 11 is currently broken. In IE10 you could easily switch between IE7, 8, and 9. Now, when you do this with IE11 it ignores conditional comments! There is a discussion of this here: http://social.msdn.microsoft.com/Forums/ie/en-US/2a9b24a3-1e97-41f8-a98c-f800c0c94e64/ieconditionals-in-ie-11-developer-tool?forum=iewebdevelopment (it stumped me for a while)

To ensure that things will work in old versions of Internet Explorer you either need to use the real browsers, or try to avoid upgrading to IE 11 (it was automatic for me) or use another tool like BrowseEmAll, which is what I did. It’s a useful tool but costs money.

I hope that helps you resolve your situation. Please let me know if you get stuck with anything.

Cheers,

Sebastian


yazo

So very cool Sebastian!

Thank you for your hard work getting this done, I really appreciate this. 🙂

Now to try this out, will let you know how this goes.

Thanks again.

yazo


Sebastian

You’re very welcome Yazo.

Cheers,

Seb

You must login or register to reply to this topic.