Page elements of CSS are narrower in Internet Explorer
I am getting frustrated while using the CSS. Many times it happens that after writing the correct script, I have observed that the page elements are narrower in Internet Explorer. Can anyone tell me the reason for this and what should I do for avoiding this.?? First I thought that the problem was of Internet Explorer, so I reinstalled that browser. Even after that I was getting the same issue. When I use the other browser like Mozilla, the text were spilling out of its container. Please help me from this strange problem!!
:notworthy
Re: Page elements of CSS are narrower in Internet Explorer
Even I have observed that looking for the CSS-based websites across all browsers is often very difficult. I think that the Page elements of CSS gets narrower in Internet Explorer, because of the misinterpretation of the CSS box model. This happens normally in Internet Explorer. I think that you should know about the Internet Explorer box model bug, before having look on the exact issue. The Internet Explorer box model bug is a software bug in the implementation of Cascading Style Sheets in earlier versions of Microsoft’s Internet Explorer web browser for Microsoft Windows. There are chances of having this error in old version of Internet Explorer. I would like to suggest you to update your IE.
Re: Page elements of CSS are narrower in Internet Explorer
Even I would like to suggest you to install the Internet Explorer or atleast update it. Because this error or bug causes only in older version of IE. For your information, I would like to tell you that Internet Explorer versions 6 and 7 are not affected by the bug if the page contains certain HTML document type declarations. In IE 6 the similar issue can be caused, when you use the XML declaration prior to the document type declaration. And the bad thing about the CSS is that the box model normally only pertains to CSS design.
Re: Page elements of CSS are narrower in Internet Explorer
Since you now know that the CSS box model causes the issue, I will tell you exactly when does that occurs. The CSS box model problem occurs in IE while declaring the ISO value in the HTML code. Latest version should not have this problem. When you use the following command :
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
is placed on the very first line of the HTML document and the second can be placed anywhere within the <head>. Also I would like to tell you that by using the first command, Internet Explorer 6 will render the CSS box model incorrectly and you may get an issues like Page elements of CSS are narrower in Internet Explorer.
Re: Page elements of CSS are narrower in Internet Explorer
The best thing is to insert a CSS hack to send different width values to different browsers for fixing the box model problem. You should be knowing about the ISO value, your CSS hack you use will depend on which ISO value that you are using. By doing this the versions of IE will render the box model incorrectly. For fixing the older version, you can use the CSS commands that I have given below :
Code:
div {
margin: 4em;
padding: 3em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}
