...

View Full Version : How to get rid of space between divs in Internet Explorer



jeffwit
05-10-2010, 09: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 :)

frankle
05-11-2010, 07:37 AM
Try replacing your css code with the one below :

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

Regards.

abduraooft
05-11-2010, 12:24 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum