IE8 Issues + others? - Support | Kriesi.at

Tagged: enfold, IE8, internet explorer

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
September 28, 2013 at 12:07 am #167336

jgoldberg1983
Participant

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,
Jonathan

September 28, 2013 at 8:39 am #167478

Ismael
Moderator

Hey 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,
Ismael

September 28, 2013 at 6:40 pm #167597

jgoldberg1983
Participant

Thanks, I tried, but unfortunately it still doesn’t help the image stretch. Is this just not supported?

September 29, 2013 at 5:08 pm #167852

Ismael
Moderator

Hello!

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,
Ismael

September 29, 2013 at 7:39 pm #167875

jgoldberg1983
Participant

Thanks 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 #167997
Ismael
Moderator
Hey!

Please try this on your custom.css or Quick CSS:
```
.avia-section {
background-repeat: repeat-y !important;
}
```
Cheers!
Ismael
September 30, 2013 at 6:03 pm #168228

jgoldberg1983
Participant

Thanks 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 #168602
Dude
Participant
Hey!

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
```

```
Best regards,
Peter
October 2, 2013 at 6:07 am #169120

jgoldberg1983
Participant

Ok, thank you. Is there a different way to stretch that will work with IE8?

October 2, 2013 at 5:47 pm #169447
Ismael
Moderator
Hello!

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, 1 month ago by Ismael.
October 2, 2013 at 7:13 pm #169497

jgoldberg1983
Participant

Thanks! Where do I insert this? Quick CSS?

October 3, 2013 at 4:19 am #169735
Ismael
Moderator
Hi!

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,
Ismael
October 3, 2013 at 7:41 pm #170041

jgoldberg1983
Participant

Hi 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 #171085
Ismael
Moderator
Hi!

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,
Ismael
October 6, 2013 at 9:19 pm #171311

jgoldberg1983
Participant

Sorry 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 #171472
Ismael
Moderator
Hey!

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,
Ismael
October 7, 2013 at 9:36 pm #171878

tdproperty
Participant

This reply has been marked as private.

October 8, 2013 at 11:10 pm #172753

jgoldberg1983
Participant

Ok, 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 #172855

Ismael
Moderator

Hey!

Please let us know if the solution work. :)

Regards,
Ismael

October 10, 2013 at 9:44 pm #173825

jgoldberg1983
Participant

Ismael, 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,
Jonathan

October 11, 2013 at 3:53 am #173939

Ismael
Moderator

Hello!

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,
Ismael

October 11, 2013 at 11:30 pm #174403

jgoldberg1983
Participant

Ok, 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
Author

Posts