IE11 is not displaying a correct width

User 91713 Photo


Registered User
83 posts

For my website I set the width of the body to 70% and a max-width of 1200em. This is displayed correctly in all the browsers except for IE11. The latter displays almost to the left and right sides of the screen. I played with the width measurements, the box-sizing and so far without any result. What should I do to fix this?

http://www.havov.net
The perfection isn't reached in one pass.
User 187934 Photo


Senior Advisor
20,181 posts

Hi Hans.
Here's one issue.
<img src="img/ju.jpg" width="100% alt="" title="" />

Also get these cleaned up.
http://validator.w3.org/check?uri=http% … mp;group=0
It may fix it.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

He must have sorted it already. I have exactly the same view in IE11 and Ffx.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,181 posts

Still the same errors.:/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 91713 Photo


Registered User
83 posts

Eric Rohloff wrote:
Hi Hans.
Here's one issue.
<img src="img/ju.jpg" width="100% alt="" title="" />

Also get these cleaned up.
http://validator.w3.org/check?uri=http% … mp;group=0
It may fix it.:)


Eric, thanks.
I don't understand the mechanisme here yet. (I closed the quotation mark and cleaned up some tags).
But the width of 100% of the images refer to the parent. In the case you quoted: it is 100% of one third of the body. This works fine except for IE.

IE start its appearence on full screen (1920 px) with an instance that is called in @media only screen and (max-width: 1200px). Here the body is set to 90%. Were the other browsers react nicely to the breakpoint IE get lost. I am beginning to think that the problem lies in the way IE handles the mediaqueries.
The perfection isn't reached in one pass.
User 1948478 Photo


Senior Advisor
1,850 posts

Hans,
This is what you are specifying for the body width in your css:

body{
width:70%;
max-width: 100em;

@media only screen and (max-width: 1200px){
body{width:90%;}

@media only screen and (max-width: 600px){
body{width:98%;}

@media only screen and (max-width:480px){
body{width:100%; }

I checked your page with IE11 and Chrome35 for varying viewport widths and both browsers do exactly what you tell them to do, i.e. the body width is reduced from 100% at viewports below 480px, to 98% between 480px and 600px, to 90% between
600px and 1200px, and to 70% for viewports wider than 1200px.

I don't quite understand why you want to reduce the body width so drastically for the widest viewports (>1200px). Was that really intentional?
The max-width of 100em only comes into play for viewport widths greater than 2,285px.

As for the percentage width in the <img> tag, you need to use css instead. The reason you get a validation error for this is that if you specify width in the html tag, it must be expressed in px.

The validation errors that Eric pointed out seem to still be there.
User 91713 Photo


Registered User
83 posts

Per wrote:

I checked your page with IE11 and Chrome35 for varying viewport widths and both browsers do exactly what you tell them to do, i.e. the body width is reduced from 100% at viewports below 480px, to 98% between 480px and 600px, to 90% between
600px and 1200px, and to 70% for viewports wider than 1200px.

I don't quite understand why you want to reduce the body width so drastically for the widest viewports (>1200px). Was that really intentional?
The max-width of 100em only comes into play for viewport widths greater than 2,285px.

As for the percentage width in the <img> tag, you need to use css instead. The reason you get a validation error for this is that if you specify width in the html tag, it must be expressed in px.

The validation errors that Eric pointed out seem to still be there.


Per, thanks for your answer.
The changes in the html and css I made so far are not visible yet, because they live in the editor on my HD for now. I intend to upload when the problems are solved. (I still have to rearrange the images, but haven't come to that).

Inger and you report that IE is doing what it is supposed to do. On my screen it doesn't though. In the attachement is a screenshot with some differences. The width (given the same html and css) differs, see the ruler. The main menu behaves also in a different way. All the circumstances are at full screen and full body width = 70%.

At some point I gave the max-width a value of 1600 em because I am under the impression that the browsers use a standard font-size of 16px, which should give a max-width of 1600px. I experimented in the css with rem, em and px, but there was no change in the widths. When I change the max-width Chrome responds and IE not at all. (When I change the max-width to 80% in the first mediaquery (max-width 1200px) IE shrinks a little).

(It is just a matter of preference, that I don't like a site to fill out to the max screen on wide screens).

My expectation is that IE reacts to the mediaqueries in the same way that the other browser do. But that doesn't seem the case. That is what I try to understand: why and where IE differs so much.



Attachments:
The perfection isn't reached in one pass.
User 1948478 Photo


Senior Advisor
1,850 posts

Hans,

I think you must have your different browsers at different zoom levels. That's the only way you can get the differences you describe for that page.

Check that all the browsers you're comparing (Firefox, Chrome, IE11) are at 100% zoom. Then I'm sure they will not show any differences.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

That sounds logically. Open your IE and click Ctrl+0 and see if it changes.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 91713 Photo


Registered User
83 posts

Guys, thank you. You are the best. That was indeed the problem.
Before I posted here I spent hours trying this and that... I never would have thought of this. Well, lesson learned.
Thanks again for helping me out here.
The perfection isn't reached in one pass.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.