...

View Full Version : <div> spacing error



dpDesignz
08-19-2010, 07:53 AM
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/codingforums/DBNZ/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):

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

.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:

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

#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

hdewantara
08-20-2010, 07:51 PM
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

dpDesignz
08-20-2010, 10:40 PM
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

hdewantara
08-20-2010, 11:02 PM
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.

dpDesignz
08-20-2010, 11:09 PM
Ok. thanks, will try that

elfkill
05-11-2011, 10:06 PM
kkkkk

teedoff
05-11-2011, 11:20 PM
Valid doctypes are a neccessity to ensure IE compatibility.

You also have a few more validation (http://validator.w3.org)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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum