How to get rid of space between divs in Internet Explorer [Archive]

jeffwit

05-10-2010, 08:21 PM

Hello All!

A very simple code, not sure what is causing the problem. In Firefox the divs are positioned perfect but in Internet Explorer, there is a space between the DIVs.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hydrant and Valve Water System Services from Valvetek – New Jersey and New York Area</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/valvetek.css" rel="stylesheet" rev="stylesheet" />
</head>

<body>
<div id="main">
<div id="left"></div>
<div id="center">
<div id="header"></div>
<div id="bar"></div>
<div id="bar"></div>
</div>
<div id="right"></div>
</div>
</body>
</html>

CSS

*
{
margin: 0;
padding: 0;
}

p
{
margin: 1em 0;
}

html {
min-height: 100%;
margin-bottom: 1px;
}

body {
text-align: center;
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-repeat: repeat;
background-position: center center;
background-color: #000000;
background-image: url(../images/main_bg2.jpg);

}

#main {
text-align: center;
margin: 0 auto;
padding: 0px;
width: 996px;
background-image: url(../images/main_bg.jpg);
background-repeat: repeat-y;
overflow: visible;
height: 690px;

}
#left {
float: left;
width: 10px;
height: 785px;
background-image: url(../images/left_bg.jpg);
margin: 0px;
padding: 0px;
background-repeat: no-repeat;

}
#right {
float: left;
width: 10px;
height: 785px;
background-image: url(../images/right_bg.jpg);
margin: 0px;
padding: 0px;
background-repeat: no-repeat;

}
#center {
width: 976px;
height: 690px;
margin: 0px auto;
padding: 0px;
float: left;

}
#header {
background-image: url(../images/header_bg.jpg);
width: 976px;
height: 106px;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;

}

#bar {
background-image: url(../images/bar.jpg);
height: 12px;
width: 976px;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;

}
#maincontent {
width: 976px;
background-image: url(../images/content_bg.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
text-align: right;
height: 279px;

}

Website Link:
http://test.foxwyn.net/valvetek/version6/index.html

Can someone please help :)

abduraooft

05-11-2010, 11:24 AM

Hi there,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Your DOCTYPE is incomplete. I'd recommend to replace it with the following.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Read http://www.alistapart.com/articles/doctype/

After that validate your page and fix all errors in it, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftest.foxwyn.net%2Fvalvetek%2Fversion6%2Findex.html

As to the solution, you might need to set a small font-size to the divs to display them with small heights.