Tagged: enfold, IE8, internet explorer
-
AuthorPosts
-
September 28, 2013 at 12:07 am #167336
Hi All,
This forum looks like a great resource with some smart people participating – thank you in advance for the help.
I’m just about ready to take my new site live but it isn’t rendering correctly on IE8. Black backgrounds where not supposed to be, etc. Is this a fixable issue? I’d appreciate any advice on how to have this looking as great in IE8.
Also, if you notice any other errors, etc that I should fix up please do let me know. I had a company put the site together for me but I want to do my own technical improvements if any are suggested.
Site can be viewed at http://50.62.64.25
Many thanks,
JonathanSeptember 28, 2013 at 8:39 am #167478Hey jgoldberg1983!
Is compatibility mode set on IE8 browser? Please disable it.
Please use this plugin: http://wordpress.org/plugins/html5shiv/
It will help render html5 elements on old IE browsers.
Regards,
IsmaelSeptember 28, 2013 at 6:40 pm #167597Thanks, I tried, but unfortunately it still doesn’t help the image stretch. Is this just not supported?
September 29, 2013 at 5:08 pm #167852Hello!
I checked your site again on IE8 and I saw a lot of improvements on the site. The Color Section are showing now and the images are correctly aligned. What images are stretch? Can you please post a screenshot?
This is what I see on IE8:
Regards,
IsmaelSeptember 29, 2013 at 7:39 pm #167875Thanks Ismael. The grey gradient background is meant to stretch, and does so on everything other than IE8. Is there any way to get this to stretch for IE8, or alternatively make sure that if it is not a compatible browser that the image just doesn’t show?
Lastly, the other two things that don’t work are the social buttons in the top left corner, and there are two images (GIA/HRD logos) in the footer aligned with CSS that don’t show on IE8 either.
Greatly appreciate the help!
September 30, 2013 at 5:41 am #167997Hey!
Please try this on your custom.css or Quick CSS:
.avia-section { background-repeat: repeat-y !important; }
Cheers!
IsmaelSeptember 30, 2013 at 6:03 pm #168228Thanks Ismael, unfortunately as currently setup it’s a gradient so repeat wouldn’t look good. Is there any way to get to stretch in ie8, or to set a rule so that if not stretching the image is just not shown?
October 1, 2013 at 8:02 am #168602Hey!
Kriesi uses the background-size attribute ( http://www.css3.info/preview/background-size/ ) to stretch the image which is not supported by IE8. If you want to hide the section background for IE8 user insert following code in header.php – before the closing </head> tag
<!--[if lt IE 9]> <style> .avia-section { background: none !important; } </style> <![endif]-->
Best regards,
PeterOctober 2, 2013 at 6:07 am #169120Ok, thank you. Is there a different way to stretch that will work with IE8?
October 2, 2013 at 5:47 pm #169447Hello!
This will probably work:
.avia-section { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale')"; }
Best regards,
Ismael- This reply was modified 11 years, 2 months ago by Ismael.
October 2, 2013 at 7:13 pm #169497Thanks! Where do I insert this? Quick CSS?
October 3, 2013 at 4:19 am #169735Hi!
Yes, please try it on custom.css or QuicK CSS. Please try to manually add the background image on avia sections.
.avia-section { background-repeat: no-repeat; background-image: url(https://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg); background-attachment: scroll; background-position: top center; background-color: #ffffff; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale')"; }
Regards,
IsmaelOctober 3, 2013 at 7:41 pm #170041Hi Ismael, I tried this and it made it stretch but then the dividing sections all had the same image as a background – it removed the custom image in the dividers.
October 6, 2013 at 9:52 am #171085Hi!
You can add a unique selector for each Avia Elements. Edit functions.php, find this code:
if(isset($avia_config['use_child_theme_functions_only'])) return;
Below, add this code:
add_theme_support('avia_template_builder_custom_css');
Edit the Color Sections that you want to the shadow1 image as background then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “section-shadow1”.
You can add something like this on your custom.css or Quick CSS:
.section-shadow1 { background-repeat: no-repeat; background-image: url(https://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg); background-attachment: scroll; background-position: top center; background-color: #ffffff; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale')"; }
Only those section with the class section-shadow1 will have the background.
Best regards,
IsmaelOctober 6, 2013 at 9:19 pm #171311Sorry didn’t understand the below:
“Edit the Color Sections that you want to the shadow1 image as background then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “section-shadow1″.”
October 7, 2013 at 6:40 am #171472Hey!
I’m sorry! My bad! Edit the Color Sections where you want to add shadow1.jpg as image as background then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “section-shadow1″.
.section-shadow1 { background-repeat: no-repeat; background-image: url(https://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg); background-attachment: scroll; background-position: top center; background-color: #ffffff; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale')"; }
Best regards,
IsmaelOctober 7, 2013 at 9:36 pm #171878This reply has been marked as private.October 8, 2013 at 11:10 pm #172753Ok, thanks Ismael. I won’t be able to look at this until later in the week. But I will try your suggestion and be back soon! Please keep this open and thank you for the help.
October 9, 2013 at 4:37 am #172855October 10, 2013 at 9:44 pm #173825Ismael, do I need to edit the functions.php file? I prefer to make sure any changes I make are only in custom.css otherwise I need to keep track of everything when updating.
This won’t work if I don’t add that line to functions.php?
Best,
JonathanOctober 11, 2013 at 3:53 am #173939Hello!
Yes, you need to add the code on functions.php. You can’t add a unique css selector without it. Please create a “change log” so you can monitor which files you edited in case you update the theme. You can also use a child theme to preserve the modifications.
Regards,
IsmaelOctober 11, 2013 at 11:30 pm #174403Ok, will do. Thank you. I have someone writing an article due to come out in the next few days on my business, so I will play around with this after that traffic calms down. I will let you know once I do.
Best,
Jonathan -
AuthorPosts
- The topic ‘IE8 Issues + others?’ is closed to new replies.