IE 11 issues

Support
#1

Hello,

I see many folks have been having problems with Internet Explorer 11, but I haven’t seen my particular issue discussed/resolved. Everything is working great in Chrome, Firefox, and Safari. But in IE there are a variety of lines throughout the site that are shifting to the right instead of centering. Please help! We’re almost ready to launch but just discovered this alignment issue late yesterday…

#2

I also just noticed an issue on my contact form in IE 11 that is not showing in the other browsers… The “Browse” button has also shifted to the right. How can I remove the extra gray space in front of the Browse button for my file uploads? I have checked my CSS and both margin and padding are set to “0”.

#3

Hey there,

Thank you for reaching out to us.

  • The first one is just a margin issue you’ve given to the line element. Please replace your margin 5em -50% 3em 24%; with 50px auto;

  • To fix the custom headline accent issue, add the following code in the Theme Options > CSS: 
.accent-2 {
    text-align: left;
}
  • The browse button behavior you’re seeing is actually a default behavior of the IE for example see this link in IE https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file and you’ll see the same result. Every browser handles this differently. We have no control over this, however you can customize it with custom development which is outside the scope we offer but I can share some links that you can follow to get this done on your own.

http://jsfiddle.net/4cwpLvae/

Hope this helps!

#4

OK, this one might be a stupid question, but here goes…

Option 2, http://jsfiddle.net/4cwpLvae/, has a CSS element and an HTML element. I know where to plug in the CSS and any JS elements, but where would I plug in the HTML element in X theme? Since this is a CF7 form, I can’t put it inline in a text element…

#5

Hi again,

I believe this can be done with CSS only, give the class custom-file-upload to the span tag that is wrapping your input (see screenshot)

Then add the following code in your child theme’s style.css file:

span.custom-file-upload input[type="file"] {
    display: none;
}

span.custom-file-upload:before {
    content: '\f093';
    font-family: "FontAwesome";
    font-weight: 900;
}

span.custom-file-upload:after {
    content: 'Choose File';
    margin-left: 5px
}

span.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 10px 40px;
    cursor: pointer;
    color: #000;
    background: #f3f3f3;
    cusrsor: pointer;
    position: relative;
    top: 10px;
    margin: 10px 0;
}

Make sure to remove the old CSS if you’ve added any. As you see this requires custom coding and further changes from here would getting into custom development which is outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

Thanks for understanding. Take care!

#6

That did the trick! Thank you so much for your help. Greatly appreciated!!!

#7

You’re welcome!
We’re glad @Nabeel were able to help you out.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.