Padding issue on Internet Explorer

Support
#1

Hi Guys,

I was hoping you could help me with a problem I’m having. On the following webpage: http://ostoform.com/index.php/about-us/ the top image and text are overlapping in Internet Explorer, but are fine on Microsoft Edge and all other browsers. It’s just a two column row with some padding between the text and the image, so not really sure what else I can do to mitigate the problem.

Would you know is there a workaround for this issue at all? It’s really important to the client that the site renders properly in Internet Explorer.

I’m also having a similar problem on this page: http://ostoform.com/index.php/how-it-works-2/ , where the browser doesn’t seem to recognise the column structure. The two columns (Regular Seal & Ostoform seal) are joined together like a margineless column.

Thanks a million for all your help in advance!

#2

Hi There,

To fix this issue on the IE browser, set the width of your images to 100%:

Let us know how it goes!

#3

That’s brilliant, that worked a treat, thank you so much!

I have another quick question if you don’t mind. I have a lot of TMs in the body of the text in subscript, I have used the following code to adjust the size of it so it renders in the browser:

sup {
font-size: 35%;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -1.2em;
}

In Internet Explorer, the size and placement of the TM’s is quite low down compared to on Chrome and Safari it looks fine, but in Internet Explorer it doesn’t look right. Any help of suggestions are gratefully received!

#4

Hi @billy.rooney,

You’re welcome! And you can apply specific CSS for IE like this

sup {
font-size: 35%;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -1.2em;
}

    @media all and (-ms-high-contrast:none)
     {
     sup { top: -1.4em; } /* IE10 */
     *::-ms-backdrop, sup { top: -1.4em; } /* IE11 */
     }

Thanks!

#5

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