Please help me how to solve ths Internet Explorer's Fault

The Coder posted this at 12:27 — 23rd April 2007.

Joined: Nov 2006

I have two DIV tags in my HTML code of my website. I have used CSS to set their height to 8px. All the browsers show it 8px however in the case of Internet Explorer it shows up 14px on both places.

The page can be seen here: http://pdna.org/ashley/insure.htm

The problem causing elements are the spacer4 and spacer5. See it in the code!!!

Here is the HTML code of this web page:

<!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>

Here is the CSS code of this page:

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
}

kb posted this at 13:37 — 23rd April 2007.

He has: 1,380 posts

Joined: Feb 2002

I'm not sure which 'div' you're talking about, so I can't be specific.

But I do know this:
-try specifying padding values of 0, sometimes that helps
-why are you using so many empty divs? can't they be combined into just a few, using padding values? possibly even get rid of the empty divs? the only time I use an empty div is if (a) it has a background-image, or (b) it's where some content is going to appear dynamically

Try those two suggestions, and see what happens.

If you're more specific with which div's you're talking about, maybe we can help more.

The Coder posted this at 20:03 — 23rd April 2007.

He has: 71 posts

Joined: Nov 2006

Thanks for the reply. Firstly the div that are causing problem are with the id "spacer4" and "spacer5"!!!

I posted the same message in another forum. The people on that forum also suggested me to reduce the number of DIVs. I am new to this CSS design. Before this I used tables for web layout. Could you please tell me how to reduce the umber of DIVs that I use. Plus tell me some helpful sources on net to polish my new skills...

kb posted this at 20:14 — 23rd April 2007.

He has: 1,380 posts

Joined: Feb 2002

Good guess then, huh?

I'm in between classes and lab, so I can only post some references at the moment. I would suggest reading some articles on sitepoint.com and alistapart.com on CSS. These are the two sites where I learned everything I know and use about CSS (in addition to the documentation at [url]www.w3.org)[/url], so you should have alot of reading!

I'll be back later with some possible fixes / tweaks on your code, but if you figure anything out using what I gave you, post the new code, and the augmented results / problems.

Good luck

The Coder posted this at 04:13 — 24th April 2007.

He has: 71 posts

Joined: Nov 2006

Thanks a lot for the posting these links!!! Yes, I tried the page with padding set to zero but still it did not work.

And thanks for helping!!!

Best Regards,
Haider Hameed

demonhale posted this at 07:25 — 24th April 2007.

He has: 3,278 posts

Joined: May 2005

Call this the demonhale Box... Hack

Explanation:

Since the height you want is lower than the default sizes defined on your css... The appropriate hack is to force it to read the exact height by adding a property with a "real" height rather than the container properties of the div.

In your CSS:

#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);
}

'
.
.
Add this...

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

#spacer5 {
	float: left;
	height: 8px;
        <strong>font-size:8px;</strong>
	width: 777px;
	background-color: rgb(20,54,92);
}

kb posted this at 11:58 — 24th April 2007.

He has: 1,380 posts

Joined: Feb 2002

There you go. I was just about to write something for you.

Try that and see if it works.

The Coder posted this at 18:12 — 24th April 2007.

He has: 71 posts

Joined: Nov 2006

Awesome, It worked. But with font size smaller that 8px. On 8px it reduces the height but not exactly to 8px. Making font size smaller that 8px makes it 8 px....

Thanks
God Bless You!!!!

demonhale posted this at 05:51 — 25th April 2007.

He has: 3,278 posts

Joined: May 2005

It does add up with equal height, but equalizes when the font value is smaller... Glad I could help... Have A Nice Day!