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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts

    Internet Explorer <div> spacing error

    I am building a site for a company who's customers use IE. As most of you know this is a horror to try coding for. I have built the pages, but when you load up the pages, the div content, as shown at http://www.dpdesignz.net/codingforum...myaccount.html has a gap between the title and the content when you view it in IE. Can anyone show me how to fix this?

    HTML (is originally in php):
    Code:
    <html>
    <head>
    <title>My Account</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link href="styles.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="css/tstyle.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="container">
    <div id="header">
    		<div class="centre section">
    			<div id="logo">
    				<img src="http://www.dbnz.net.nz/members/images/dbnz_logo_sm.png" width="225" height="70" alt="Dbnz Logo" />
    			</div>
    		</div>
    	</div>
    	<div id="body">
    <table style="text-align: left; width: 100%;" border="0"
     cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td
     style="width: 162px; text-align: left; vertical-align: top;">
     <div id="column_left">
     <br>
     <br>
     <div id="aheader">
     <div style="padding: 6px;"><img style="width: 20px; height: 16px;"
     alt="Online Shop" src="http://www.dbnz.net.nz/members/images/1276402301_user_info.png">	My Account</div></div>
      <div id="acontent">
    <?php 
    /*********************** MYACCOUNT MENU ****************************
    This code shows my account menu only to logged in users. 
    Copy this code till END and place it in a new html or php where
    you want to show myaccount options. This is only visible to logged in users
    *******************************************************************/
    if (isset($_SESSION['user_id'])) {?>
    <div class="myaccount">
      <a href="#"><img style="border: 0px solid ; width: 12px; height: 10px;"
     alt="My Account" src="http://www.dbnz.net.nz/members/images/user_infos.jpg"></a>	<a href="#">My Account</a><br>
      <a href="#"><img style="border: 0px solid ; width: 12px; height: 10px;"
     alt="Settings" src="http://www.dbnz.net.nz/members/images/settings_Tools-64s.jpg"></a>	<a href="#">Settings</a><br>
        <a href="#"><img style="border: 0px solid ; width: 12px; height: 10px;"
     alt="Settings" src="http://www.dbnz.net.nz/members/images/application-exits.jpg"></a>	<a href="#">Logout </a>
    	<br></div>
    <?php }
    if (checkAdmin()) {
    /*******************************END**************************/
    ?>
          <p> <div style="color: black;"><a href="#"><img style="border: 0px solid ; width: 12px; height: 10px;"
     alt="My Account" src="http://www.dbnz.net.nz/members/images/1277103754_Control-Panel.png"></a>	<a href="#">Admin CP</a></div>
    	  <div style="color: black;"><a href="#"><img style="border: 0px solid ; width: 12px; height: 10px;"
     alt="My Account" src="http://www.dbnz.net.nz/members/images/1277103724_Search.png"></a>	<a href="#">Profile Search</a></div></p>
    	  <?php } ?></div>
    	  <div id="afooter"></div>
    	  <br>
    	  <div id="aheader">
    	  <div style="padding: 6px;">E-Store</div></div>
    	  <div id="acontent"><div style="text-align: center;"><big
     style="color: red;">DO YOU WANT TO TRY OUR NEW ONLINE SHOP?</big><br>
                <a href="#"><img
     style="border: 0px solid ; width: 128px; height: 128px;"
     alt="Online Shop" src="http://www.dbnz.net.nz/members/images/1276402638_shopping_cart.png"></a>
    <br>
          <a href="#">Click Here!</a></div>
    </div>
    	  <div id="afooter"></div>
    	  </div>
          </td>
          <td style="text-align: left; vertical-align: top;"><div id="bheader"><h3 class="titlehdr"><img style="border: 0px solid ; width: 37px; height: 30px;"
     alt="My Account" src="http://www.dbnz.net.nz/members/images/user_info.jpg">	Welcome to your account <?php echo $_SESSION['user_name'];?></h3>  
    	  </div>
         <br>
    	 <br>
    	 <table
     style="width: 790px; text-align: left; margin-left: auto; margin-right: auto;"
     border="0" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td
     style="vertical-align: middle; text-align: center;">
    	 <table
     style="width: 99%; text-align: left; margin-left: auto; margin-right: auto;"
     border="0" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td
     style="vertical-align: top; text-align: center; width: 425px;"><div id="theader"><div style="padding: 3px;"><img
     style="border: 0px solid ; width: 200px; height: 35px;"
     alt="Forms" src="http://www.dbnz.net.nz/members/images/forms.gif"></div></div>
     <div id="tcontent"><a href="#"><img
     style="border: 0px solid ; width: 200px; height: 130px;"
     alt="Forms" src="http://www.dbnz.net.nz/members/images/formsi.gif"></a><br>
     <a href="#"><big><big><b>Click Here</b></big></big></a>
    </div>
     <div id="tfooter"></div>
     </td>
          <td
     style="vertical-align: top; text-align: center; width: 425px;"><div id="theader"><div style="padding: 5px;"><img
     style="border: 0px solid ; width: 200px; height: 35px;"
     alt="Forms" src="http://www.dbnz.net.nz/members/images/e-shop.gif"></div></div>
     <div id="tcontent"><a href="#"><img
     style="border: 0px solid ; width: 200px; height: 130px;"
     alt="Forms" src="http://www.dbnz.net.nz/members/images/carti.gif"></a><br>
     <big><big><b><a href="#">Click Here</a></b></big></big>
     </div>
     <div id="tfooter"></div>
    </td>
        </tr>
      </tbody>
    </table>
    </td>
        </tr>
      </tbody>
    </table>
          </td> 
      </tbody>
    </table>
    </div>
    <hr style="width: 100%; height: 2px;">
    <table style="text-align: left; width: 100%;" border="0"
     cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td
     style="vertical-align: middle; text-align: left; font-family: Helvetica,Arial,sans-serif;"><small>
          </small>
          <h6 style="font-family: Courier New,Courier,monospace;"><small><span
     style="color: rgb(153, 153, 153);">©</span><span
     style="font-family: Helvetica,Arial,sans-serif;"><span
     style="color: rgb(153, 153, 153);">2010
    dpDesignz</span></span></small></h6>
          <small></small></td>
          <td style="text-align: right;" valign="middle"><a
     href="http://www.dpDesignz.net/"><img
     style="border: 0px solid ; width: 140px; height: 26px;"
     alt="dpDesignz" src="http://www.dbnz.net.nz/members/images/dpDesignzpb.png"></a></td>
        </tr>
      </tbody>
    </table>
    </div>
    </body>
    </html>
    styles.css:
    Code:
    .forms {
    background-color: #C0C0C0;
    font: normal 12px arial,verdana; color: black;
    padding: 3px;
    
    border: 1px solid #CAE4FF;
    }
    .myaccount {
    font: normal 12px arial,verdana; color: white;
    
    }
    
    a {
    color: #03c;
    }
    
    .main {
    font: normal 12px arial,verdana;
    padding: 2px;
    margin: 2px;
    
     }
     
     .titlehdr {
     font: normal 22px arial, verdana;
     color: #c00;
     border-bottom: 1px solid #c00;
     
     
     }
     
    .msg {
    padding: 5px;
    width: 600px;
    margin: 2px;
    color: #c00;
    border: 1px solid #c00;
    background-color: #FEF1ED;
    font: bold 13px  verdana;
    } 
     
    .error {
    font: normal 11px arial, verdana;
    color: #c00;
    border: 1px solid #c00;
    padding: 2px;
    margin: 5px;
    float: left;
    background-color: #FEF1ED;
    }
     
     .example {
    font: normal 10px arial;
    color: red;
    }
    .approved {
    font: normal 10px arial;
    color: green;
    }
    
    .loginform {
    font: 16px normal arial;
    background-color: #000000;
    font: normal 12px arial,verdana; color: white;
    padding: 3px;
    border: 1px solid #CAE4FF;
    }
    
    .loginform #txtbox {
    font: bold 16px arial;
    color: #f00;
    }
    css/styles.css:
    Code:
    * {
    	padding:0;
    	margin:0;
    }
    
    body {
       margin:0;
       padding:0;
       height:100%;
    }
    
    #login {
    	background-color:#79858b;
    	border-top:3px solid #000;
    }
    
    #login form {
    	background-color:#000;
    	float:right;
    	width:336px;
    }
    
    #container {
       min-height:100%;
       position:relative;
    }
    
    #header {
    	background-color:#79858b;
    	background:url('http://www.dbnz.net.nz/members/images/blend.jpg') repeat-x;
    	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#79858b), to(#fff));
    	height:auto;
    }
    
    #menu {
    	background-color:#000;
    	height:25px;
    }
    
    .centre {
    	margin:0 auto;
    	width:960px;
    }
    
    .header {
    	background:url('http://www.dbnz.net.nz/members/images/no1.png') no-repeat;
    	height:250px;
    }
    
    .section {
    	height:120px;
    }
    
    .intro {
    	padding-top:50px;
    	width:450px;
    }
    
    #body {	
       padding:10px;
       padding-bottom:62px;   /* Height of the footer */
    }
    
    #logo img {
    	clear:right;
    	float:right;
    	margin-top:24px;
    }
    
    a img {
    	border:none;
    }
    
    #content div.front {
    	background:url('http://www.dbnz.net.nz/members/images/separator_lg.jpg') no-repeat 444px 0;
    	height:auto;
    	min-height:350px;
    	width:960px;
    }
    
    #column_left {
    	float: left;
    	width: 162px;
    	margin-right: 10px;
    	clear: left;
    }
    
    #aheader {
    	font: bold 15px arial,verdana; color: white;
    	background:url('http://www.dbnz.net.nz/members/images/box_top.gif') no-repeat;	
    	height:30px;
    }
    
    #acontent {
        padding:5px;
    	background:url('http://www.dbnz.net.nz/members/images/box.gif');
        background-repeat: repeat-y;
    }
    
    #afooter {
    	background:url('http://www.dbnz.net.nz/members/images/box_bottom.png') no-repeat;	
    	height:5px;
    }
    
    .gallery {
    	float:left;
    	margin:0 12px 12px 0;
    	width:180px;
    }
    
    .column {
    	float:left;
    	margin:0 12px 25px 0;
    	width:180px;
    }
    
    .double {
    	width:372px;
    }
    
    .triple {
    	width:564px;
    }
    
    .four {
    	margin-top:35px;
    	width:756px;
    }
    
    .tight {
    	margin-top:-43px;
    }
    
    .last {
    	margin-right:0;
    }
    
    .inline {
    	padding-top:57px;
    }
    
    .boxed {
    	background-color:#f1f2f3;
    	float:left;
    	padding:10px 10px 7px;
    	margin-bottom:24px;
    }
    
    .contact {
    	background-color:#f1f2f3;
    	float:left;
    	padding:10px;
    	height:auto;
    	margin-bottom:10px;
    	width:352px;
    }
    
    .brands, .fleetlink, .imagery  {
    	float:left;
    	display:inline;
    	width:545px;
    }
    
    .brands {
    	margin-top:25px;
    }
    
    .fleetlink {
    	margin:25px 0 0 107px;
    	width:307px;
    }
    
    .fleet {
    	width:415px;
    }
    
    .imagery {
    	padding:35px 0;
    }
    
    .product-logo {
    	margin-top:25px;
    }
    
    #footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:60px;   /* Height of the footer */
       border-top:2px solid #000;
       clear:both;
       padding-top:10px;
       background:#6cf;
    }
    
    .floatright {
    	float:right;
    }
    
    /* -- Members Login form -- */
    form {
    	margin-bottom:40px;
    }
    
    form .boxed {
    	padding-bottom:20px;
    }
    
    form ul.login {
    	list-style:none;
    }
    
    form ul.login li {
    	float:left;
    	padding:2px 0 5px 5px;
    }
    
    form ul.login li input.text {
    	background-color:#a5b2b3;
    	border:1px solid #7f7f7f;
    	color:#fff;
    	padding:3px;
    	width:135px;
    }
    
    form ul.login li input.button {
    	background-color:#333;
    	border:1px solid #666;
    	color:#fff;
    	cursor:pointer;
    	padding:3px;
    	width:65px;
    }
    
    /* -- Contact Form -- */
    form#contact label {
    	clear:left;
    	color:#000;
    	font-family:"lucida Grande", "Lucida Sans Unicode", Verdana, Arial;
    	font-size:11px;
    	font-weight:700;
    	float:left;
    	text-align:right;
    	margin-top:13px;
    	width:100px;
    }
    
    form#contact input.text {
    	float:left;
    	padding:2px;
    	margin:10px 10px 0 10px;
    	width:415px;
    }
    
    form#contact textarea.text {
    	float:left;
    	padding:2px;
    	margin:10px 10px 0 10px;
    	width:415px;
    }
    
    form#contact ul.inline {
    	list-style:none;
    }
    
    form#contact ul.inline li {
    	float:left;
    	margin:11px 0 0 10px;
    }
    
    .inline-label {
    	padding:0 10px;
    }
    
    form#contact input.button {
    	float:right;
    	margin:10px 10px 0 0;
    }
    
    /* -- Menu -- */
    #menu ul {
    	list-style:none;
    	height:auto;
    }
    
    #menu ul li {
    	background:url('http://www.dbnz.net.nz/members/images/separator.jpg') no-repeat top left;
    	color:#fff;
    	font-family:"ITC Stone Sans", "lucida Grande", "Lucida Sans Unicode", Verdana, Arial;
    	font-style:italic;
    	font-size:12px;
    	float:left;
    	height:17px;
    	padding:3px 0 5px 25px;
    }
    
    #menu ul li.submenu {
    	color:#79858b;
    }
    
    #menu ul li.products, #menu ul li.first {
    	background:none;
    }
    
    #menu ul li.first {
    	padding-left:0;
    }
    
    #menu ul li.active {
    	color:#e42518;
    }
    
    #menu ul li a:link, #menu ul li a:visited {
    	color:#fff;
    	text-decoration:none;
    }
    
    #menu ul li a:hover {
    	color:#e42518;
    }
    
    .product {
    	height:40px;
    }
    
    .dba {
    	background-color:#f6ab00;
    }
    .debeer {
    	background-color:#d20110;
    }
    .valspar {
    	background-color:#7a00b9;
    }
    .octoral {
    	background-color:#009dea;
    }
    .lic {
    	background-color:#29af00;
    }
    
    h1, h2, h3 {
    	color:#e42518;
    	font-family:"ITC Stone Sans";
    	font-style:italic;
    	font-size:26px;
    	padding-bottom:10px;
    }
    
    h2 {
    	font-size:18px;
    	margin:30px 0 10px;
    }
    
    h3 {
    	font-size:14px;
    	margin:33px 0 0;
    }
    
    p, form#contact ul.inline li, ul.list {
    	color:#000;
    	font-family:"lucida Grande", "Lucida Sans Unicode", Verdana, Arial;
    	font-size:11px;
    	line-height:18px;
    	padding-bottom:6px;
    }
    
    .intro p {
    	font-size:12px;
    	text-align:justify;
    }
    
    p.justify {
    	text-align:justify;
    }
    
    p.name {
    	font-weight:700;
    	float:left;
    	padding:0 30px 0 0;
    	width:120px;
    }
    
    span.title {
    	font-style:italic;
    	font-weight:normal;
    }
    
    p.details {
    	display:block;
    	float:left;
    }
    
    p a {
    	color:#79858b;
    	text-decoration:none;
    }
    
    p a:hover {
    	color:#e42518;
    }
    css/tsyles.css:
    Code:
    #theader {
    	font: bold 15px arial,verdana; color: white;
    	text-align: center; vertical-align: middle;
    	background:url('http://www.dbnz.net.nz/members/images/tbox_top.gif') no-repeat;	
    	height:40px;
    }
    
    #tcontent {	
        padding:5px;
    	font: normal 12px arial,verdana; color: white;
    	background:url('http://www.dbnz.net.nz/members/images/tbox.gif');
        background-repeat: repeat-y;
    }
    
    #tfooter {
    	background:url('http://www.dbnz.net.nz/members/images/tbox_footer.gif') no-repeat;	
    	height:20px;
    }
    #xheader {
    	font: bold 15px arial,verdana; color: black;
    	text-align: center; vertical-align: middle;
    	background:url('http://www.dbnz.net.nz/members/images/tbox_top2.gif') no-repeat;	
    	height:40px;
    }
    
    #xcontent {	
        padding:5px;
    	font: normal 12px arial,verdana; color: black;
    	background:url('http://www.dbnz.net.nz/members/images/tbox2.gif');
        background-repeat: repeat-y;
    }
    
    #xfooter {
    	background:url('http://www.dbnz.net.nz/members/images/tbox_footer2.gif') no-repeat;	
    	height:20px;
    }
    Thanks in advance

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Your page loads in quirks mode on my IE8.
    Have you tried declaring doctype to your page? It's a start.
    See http://www.w3schools.com/tags/tag_DOCTYPE.asp

    Hendra

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    The page is originally PHP. It is a password protected page on the customers site, so I had to change it to HTML to have a preview on my page

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    So?

    Why don't just echo-ing a line like:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    before <html> tag line using PHP?

    This shall force your customers not to enter quirks mode of their IE.

  • #5
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Ok. thanks, will try that

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    =p

    kkkkk
    Last edited by elfkill; 05-11-2011 at 11:07 PM. Reason: ç

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Valid doctypes are a neccessity to ensure IE compatibility.

    You also have a few more validation errors that should be fixed. Including defining more than one ID as the same name. Classes can be defined multiple times, but ID's must be unique. You also have a closing </p> tag mismatch in your code.
    Last edited by teedoff; 05-12-2011 at 12:24 AM.
    Teed


  •  

    Posting Permissions

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