why its always internet explorer going the wrong way

The Coder posted this at 16:28 — 21st April 2007.

Joined: Nov 2006

when ever i try to set height attribute of a div in css to size smaller than 14px internet explorer automatically changes it to 14px.. all the other show the smaller size:

for example
if div height is 8px all the browsers will show it 8px however in the case of internet explorer it is 14px.....

what the hell is this... this thing is really frustrating me... is there any solution to this damn problem

The Coder posted this at 17:32 — 21st April 2007.

He has: 71 posts

Joined: Nov 2006

someone please help

timjpriebe posted this at 19:42 — 21st April 2007.

He has: 2,667 posts

Joined: Dec 2004

Hard to tell for sure without seeing code. Can you post a link to the page, or the code itself?

The Coder posted this at 21:29 — 21st April 2007.

He has: 71 posts

Joined: Nov 2006

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ashley Services</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="center">
<div id="spacer1"></div><div id="logo"><img src="images/logo.jpg"></div>
<div id="spacer2"></div>
<div id="spacer3"></div>
<div id="spacer4"></div>
<div id="spacer5"></div>
<div id="header"></div>
<div id="menu"><img src="images/menu.jpg"></div>
<div id="container1">
<div id="box1"><img src="images/box1.jpg"></div>
<div id="aboutus"><img src="images/aboutus.jpg"><br>Combine 20 years of construction experience with a dynamic management team and you have 

a professional force..</div>
<div id="box2"><img src="images/box2.jpg"></div>
<div id="services"><img src="images/services.jpg"><br>
Commercial Construction<br>
Truss Erection / Installation<br>
Steel Framing/Dry Wall/Ceilings<br>
Municipal Representation
</div>
<div id="box3"><img src="images/box3.jpg"></div>
<div id="contactus"><img src="images/contactus.jpg"><br><br>
PO BOX 362,<br>
Waterford, NY<br><br>
Tel: 518-378-1765
</div>
</div>
<div id="container2"><p>
<img src="images/ashley.jpg"><br>
Combine 20 years of construction experience with a dynamic management team and you have a professional force..<br><br><br>
<img src="images/projects.jpg"><br>
Commercial Construction <b>Project Name</b><br>
Truss Erection / Installation <b>Project Name</b><br>
Steel Framing/Dry Wall/Ceilings <b>Project Name</b><br>
Municipal Representation <b>Project Name</b><br>
Commercial Construction <b>Project Name</b><br>
Truss Erection / Installation <b>Project Name</b><br>
Steel Framing/Dry Wall/Ceilings <b>Project Name</b><br>
Municipal Representation <b>Project Name</b><br>
Commercial Construction <b>Project Name</b><br>
Truss Erection / Installation <b>Project Name</b><br>
Steel Framing/Dry Wall/Ceilings <b>Project Name</b><br>
Municipal Representation <b>Project Name</b><br>
</p>
</div>
<div id="footer1"><div class="font"><a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Services</a> | <a href="#">Projects</a> | 

<a href="#">Contact Us</a> | <a href="#">Sitemap</a></div></div>
<div id="footer2"><div class="font">Copyright 2007. Ashley Construction Services All Rights Reserved.</div></div>
</div>
</body>
</html>

body {
	font-family: verdana, sans-serif;
	background-color: rgb(114,120,118);
	font-size: 12px;
	color: #000000;
	margin: 0px;
}

#center {
	margin-left: auto;
	margin-right: auto;
	width: 777px;
	background-color: #FFFFFF;
	border-width: 0px;
	height: auto;
	overflow: hidden;
}

#spacer1 {
	float: left;
	height: 62px;
	width: 65px;
	background-color: #FFFFFF;
}

#logo {
	float: left;
	height: 62px;
	width: 131px;
}

#spacer2 {
	float: left;
	height: 62px;
	width: 80px;
	background-color: #FFFFFF;
}

#spacer3 {
	float: left;
	height: 54px;
	width: 501px;
	background-color: #FFFFFF;
}

#spacer4 {
	float: left;
	height: 8px;
	width: 501px;
	background-color: rgb(140,174,201);
	background-image: url('images/stylo.jpg');
	background-repeat: no-repeat;
}

#spacer5 {
	float: left;
	height: 8px;
	width: 777px;
	background-color: rgb(20,54,92);
}

#header {
	float: left;
	height: 168px;
	width: 777px;
	background-image: url(images/header.jpg);
}

#menu {
	float: left;
	height: 22px;
	width: 777px;
}

#container1 {
	float: left;
	width: 370px;
	padding: 35px 5px 20px 25px;
}

#container2 {
	float: left;
	width: 375px;
	border-width: 0px 0px 0px 2px;
	border-style: dotted;
	border-color: #AAAAAA;
	height: 280px;
}

#box1 {
	float: left;
	width: 85px;
	height: 263px;
}

#aboutus {
	float: left;
	width: 250px;
	padding: 5px 30px 15px 5px;
	text-align: justify;
	font-family: Verdana,helvetica,arial,sans-serif;
	font-size: 10px;
	font-weight: normal;
}

#box2 {
	float: left;
	width: 87px;
	height: 193px;
	padding: 0px 10px 0px 10px;
}

#services {
	float: left;
	width: 178px;
	padding: 0px 0px 18px 0px;
	font-family: Verdana,helvetica,arial,sans-serif;
	font-size: 10px;
	font-weight: normal;
}

#box3 {
	float: left;
	width: 87px;
	padding: 0px;
}

#contactus {
	float: left;
	width: 86px;
	padding: 5px 0px 0px 5px;
	font-family: Verdana,helvetica,arial,sans-serif;
	font-size: 10px;
	font-weight: normal;
}

p {
	float: left;
	margin-left: 10px;
	border-color: #AAAAAA;
	font-family: Verdana,helvetica,arial,sans-serif;
	font-size: 10px;
	font-weight: normal;
}

#footer1 {
	float: left;
	width: 400px;
	background-color: rgb(176,185,190);
	color: white;
	border-width: 0px 0px 4px 0px;
	border-color: rgb(20,54,92);
	border-style: solid;
	height: 20px;
}

#footer2 {
	float: left;
	width: 377px;
	background-color: rgb(176,185,190);
	color: rgb(20,54,92);
	border-width: 0px 0px 4px 0px;
	border-color: rgb(20,54,92);
	border-style: solid;
	font-size: 10px;
	height: 20px;
}

A:link, A:visited, hover {
	FONT-FAMILY: verdana,helvetica,arial,sans-serif; FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #FFFFFF; TEXT-DECORATION: none;
}

A:hover {
	TEXT-DECORATION: underline;
}
div.font {
	padding: 2px
}

The Coder posted this at 21:32 — 21st April 2007.

He has: 71 posts

Joined: Nov 2006

See the height of the spacer4 and spacer5. They are actually 8px but Internet Explorer shows it as if it is 14px...

#spacer4 {
	float: left;
	height: 8px;
	width: 501px;
	background-color: rgb(140,174,201);
	background-image: url('images/stylo.jpg');
	background-repeat: no-repeat;
}

#spacer5 {
	float: left;
	height: 8px;
	width: 777px;
	background-color: rgb(20,54,92);
}

JeevesBond posted this at 21:28 — 21st April 2007.

He has: 3,956 posts

Joined: Jun 2002

Please don't double post within such a short amount of time. It hasn't made me see this topic any sooner than I would have done had you not posted it.

The Coder wrote: when ever i try to set height attribute of a div in css to size smaller than 14px internet explorer automatically changes it to 14px.. all the other show the smaller size:

I would guess this is because Internet Explorer will always expand an element to fit its contents. Other browsers do as the standards say and make the element exactly the width/height you specify, Internet Explorer doesn't. For example: div A is inside div B, because there is some text inside div A it's height is 14px. CSS specifies that div B should have a height of 8px. In standards complaint browsers it's height will be 8px, Internet Explorer will try to make the height 8px but find that the height of div A is 14px, it will then make the height of div B 14px too.

First thing to try is make sure there are no spaces, text or other content inside your div. Also check the height of the div contents, fiddling with this stuff is annoying, time consuming and entirely necessary.