Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to get rid of space between divs in Internet Explorer

    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
    Code:
    <!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
    Code:
    *
    {
    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

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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?verbos...6%2Findex.html

    Edit: As to the solution, you might need to set a small font-size to the divs to display them with small heights.
    Last edited by abduraooft; 05-11-2010 at 11:38 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •