The most common problem encountered by CSS and Internet Explorer, is th differences of explanation of the CSS box model, which causes the elements of the page to look narrower in the Internet Explorer. Each HTML element is in essence a box, the width is the summation of its margin, content area, padding and border. Look at the program below:
CSS rule:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}
It means that each 50em wide in total has the amount made up of 303m wide content area, and a 4em padding, 1em border and 5em invisible margin on both the left and right sides.
In the Internet Explorer, the padding and the border are inserted in the width of the content as opposed to an add on. I.E. the measurement of the width of the content is 20em which is 30em less 5em padding and border on either side, or the summation of the width of the div is around 40em.
A model for CSS box issue can happen in IE5.x, and also in IE6, based on how the author declares the ISO value in the code of HTML. There are two varieties of ways in doing this:
• <?xml version=”1.0″ encoding=”iso-8859-1″?>
• <meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
The number one command is positioned on the first line of the HTML document and the second command is put anywhere within the <head>. XHTML pages are used to validate its mandatory use of commands. W3C suggests using the first command as the second and later on it will be phased out.
Using making use of the primary command, Internet Explorer 6 will make the CSS box function incorrectly, the same with lower versions such as Internet Explorer number five (IE5). To replace the box model, the author would have to insert a a hack from CSS to send width different in values to a variety of navigators. The CSS hack used will also depend on the ISO value used and what versions of Internet Explorer that is making the box function incorrectly.
To repair only IE5.x, the following commands for CSS can help any web designer
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}
To fix up all versions of IE, use these CSS commands:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}
Tags: CSS and IE Issues
(3 votes, average: 4.67 out of 5)
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Leave a reply