Layout Not Correct in IE 11« Back to Questions List

My design which is working pretty well in Chrome, Safari, FireFox on Mac and Win but when I load up IE 11 it is just a mish mash. I have check the IE6+ button and that didn’t make any difference.

What am I doing wrong?

Jeff

Asked by Jeff★★★
Added August 5, 2015 3:46 pm

This question has been resolved, view the correct answer now!

Bold Headings Issue

We have found that most browsers render headings eg. h1 with a bold font weight while IE does not.

CSS Background Position Issue

We found that FireFox does not translate background images which specify the background-position property in CSS. While other browsers render this element correctly, FireFox will only translate the image position if you declare your position with the background element NOT explicitly the background-property element.

Bold and Strong Issue

DO NOT USE b or strong tags with HTML elements, many browsers including IE do not render these elements correctly – instead use font-weight:bold; in the CSS!

Text Size Issue

Export Kit will measure the size of your Text element in your PSD and translate the size for HTML, because browsers render text differently (see the example below), you may run into situations where your text looks the same on some browsers/devices but very different on others. This can happen often in IE as it renders fonts very differently than other browsers.

QUICK FIX: increase the size of your Text element in your PSD and this will accommodate for slight differences in font size and rendering.
Answer by admin
Answered On August 11, 2015 4:01 am #
Correct Answer

This is not actually you – it’s the browser (short answer)

There are several possible reason for this, some are simple while others are extremely specific in nature. All browsers and devices render fonts, sizes and effects differently – DO NOT try to FORCE an Output to work on ALL browsers and devices – it’s IMPOSSIBLE, trust us – we test this all the time!

Resource #1: //exportkit.com/learn/video-tutorials/before-you-export-videos/photoshop-vs-image-vs-browser-rendering – everything renders differenlty

Resource #2: //exportkit.com/learn/video-tutorials/before-you-export-videos/browser-text-rendering – fonts have the least support across all browsers

Details

We have noticed that recent updates to all browsers have broken may previously working style sheets, E.g. If you add a background-image to CSS but you change the position of the image – Chrome, IE, Safari work 100%, but FireFox breaks! It seems all browsers are updating their HTML parsing and this is changing how stylesheets will render.

We will use this post detail some of the differences we find between browsers + correct the IE11 issue, more info to come.

Answer by admin
Answered On August 6, 2015 12:59 pm #
Looking for another answer? View other questions in General or get premium support for guaranteed results.
Asked by Jeff★★★
1613 views
2 answers
Last Answered 10 years ago by admin

Categories

Recent Answers

asked by lafejol
asked by lafejol
asked by rihabbenhmida
asked by zaineb khiari
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.