Jump to content

Why Ie Displays Square Div As A Rectangle In Case Of Js Created?


abrakatabra
 Share

Recommended Posts

Hello!Here are two ways to create a div element. The first way is statical and the second one is dynamical through JavaScript.The first:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>	<head>		<title></title>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<style type="text/css">			.gen_items1{				position: absolute;				top: 0px;				left: 0px;				width: 8px;				height: 8px;				background: white;				border: solid 1px blue;			}		</style>	</head>	<body>		<div class="gen_items1">		</div>	</body></html>

The second:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>	<head>		<title></title>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<style type="text/css">			.gen_items1{				position: absolute;				top: 0px;				left: 0px;				width: 8px;				height: 8px;				background: white;				border: solid 1px blue;			}		</style>	</head>	<body>		<script type="text/javascript">			var newchild=document.createElement('div');			newchild.className = "gen_items1";			document.getElementsByTagName('body')[0].appendChild(newchild);		</script>	</body></html>

both of them have the same css style named gen_items1.Through the first way IE shows a square, but in case of the second way IE displays a rectange. Why is there a difference? Can you please help me to find out an answer?

Edited by Alexander
Link to comment
Share on other sites

Hmm... That sounds strange to me. Try giving the <div> element some spaces as innerHTML.

newchild.innerHTML = "  ";

These lines are redundant since that's already being given with the className.

			newchild.style.width="8px";			newchild.style.height="8px";

By the way, that <!DOCTYPE> declaration you're using is going to trigger Quirks Mode in all browsers, which means they'll do things very differently than they're supposed to.

Edited by Ingolme
Link to comment
Share on other sites

Thank you for the answer.

newchild.innerHTML = "  ";

I have tried additional spaces and have tried to deleted <!DOCTYPE> but no result: my div element is displayed differently by two mention ways.
These lines are redundant since that's already being given with the className.
			newchild.style.width="8px";			newchild.style.height="8px";

Yes. you are right. They are unnecessary lines which can be ignored. I have corrected my code at the first post.
By the way, that <!DOCTYPE> declaration you're using is going to trigger Quirks Mode in all browsers, which means they'll do things very differently than they're supposed to.
So, what shoud I use insted of <!DOCTYPE>? Edited by Alexander
Link to comment
Share on other sites

That's because 8px is smaller than the size of the font in the box and in order to fix that you also have to set the line-height property.Removing the DOCTYPE will not solve the Quirks Mode problem, a document without a DOCTYPE declaration also renders in quirks mode.The only way to solve it is to use a Standards Compliant DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Link to comment
Share on other sites

That's because 8px is smaller than the size of the font in the box and in order to fix that you also have to set the line-height property.Removing the DOCTYPE will not solve the Quirks Mode problem, a document without a DOCTYPE declaration also renders in quirks mode.The only way to solve it is to use a Standards Compliant DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

unfortunately, line-height does not solve my problem :-(
line-height: 1px;

here is whole code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<title></title>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<style type="text/css">			.gen_items1{				position: absolute;				top: 0px;				left: 0px;				width: 8px;				height: 8px;				background: white;				border: solid 1px blue;				line-height: 1px;			}		</style>	</head>	<body>		<!-- <div class="gen_items1"></div> -->		<script type="text/javascript">			var newchild=document.createElement('div');			newchild.className = "gen_items1";			newchild.innerHTML = "  "; // also tried without this line			document.getElementsByTagName('body')[0].appendChild(newchild);		</script>	</body></html>

Edited by Alexander
Link to comment
Share on other sites

whole code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<title></title>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<style type="text/css">			.gen_items1{				position: absolute;				top: 0px;				left: 0px;				width: 8px;				height: 8px;				background: white;				border: solid 1px blue;				line-height: 1px;				font-size: 1px;			}		</style>	</head>	<body>		<!-- <div class="gen_items1"></div> -->		<script type="text/javascript">			var newchild=document.createElement('div');			newchild.className = "gen_items1";			document.getElementsByTagName('body')[0].appendChild(newchild);		</script>	</body></html>

Link to comment
Share on other sites

Hmm, that's kind of strange, it might be a weird bug in Internet Explorer. Certainly somebody could put a few hours of testing and investigation behind it, but I'd say it's more work than it's worth.Usually, to get a box to behave perfectly in Internet Explorer you also have to have a non-breaking character in the element, such as the non-breaking space.<div>&nbsp;</div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...