Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #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,
    Jonathan

    #167478

    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

    #167597

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

    #167852

    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

    #167875

    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!

    #167997

    Hey!

    Please try this on your custom.css or Quick CSS:

    .avia-section {
    background-repeat: repeat-y !important;
    }

    Cheers!
    Ismael

    #168228

    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?

    #168602

    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

    
    <!--[if lt IE 9]>
    <style>
    .avia-section {
    background: none !important;
    }
    </style>
    <![endif]-->
    

    Best regards,
    Peter

    #169120

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

    #169447

    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 1 year, 1 month ago by  Ismael.
    #169497

    Thanks! Where do I insert this? Quick CSS?

    #169735

    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(http://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

    #170041

    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.

    #171085

    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(http://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

    #171311

    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″.”

    #171472

    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(http://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

    #171878
    This reply has been marked as private.
    #172753

    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.

    #172855

    Hey!

    Please let us know if the solution work. :)

    Regards,
    Ismael

    #173825

    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

    #173939

    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

    #174403

    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

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

The topic ‘IE8 Issues + others?’ is closed to new replies.