PDA

Click to See Complete Forum and Search --> : Mysterious margin/padding/spacing

drhansenjr
12-07-2007, 02:58 PM
I have a table cell containing a div in a page that is ending up with an unwanted 9px of padding/margin in IE that does not appear in Firefox. The gap appears in the area of the red circle in the attached screenshot.

The blue region is defined by td.pageLeft, and the mysterious gap to the right falls between the right boundary of the div.moduletable and inside of the td.pageLeft container.

The relevant generated page source and css follow (I can't give a link to the live site due to confidentiality issues).

Thanks!!

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to mysite.com - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://www.mysite.com/templates/mytemplate1/css/template_css.css"
rel="stylesheet" type="text/css" ></link>
</head>
<body>
<div class="border-outer">

<div class="pageContainer">
<div class="pageTopContent">
<div class="pageHeader">
</div>

</div>
<table class="pageMain">
<tr>
<td class="pageLeft">

<div class="moduletable">
<div style="width:100%; overflow: hidden; padding:0px; border-width:0px; margin:0px;">
<form action="http://www.mysite.com/index.php?option=com_comprofiler&amp;task=logout" method="post" id="mod_login_logoutform" style="margin:0px;">
<span id="mod_login_greeting">Hi, drhansenjr</span>&nbsp;<input type="submit" name="Submit" class="button" value="Logout" />
<input type="hidden" name="op2" value="logout" />
</form></div> </div>
<div class="moduletable">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="http://www.mysite.com/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="http://www.mysite.com/index.php?option=com_comprofiler&amp;Itemid=26" class="mainlevel" >My Profile</a></td></tr>

</table> </div>
</td>

<td class="pageBodyContent">

<table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top"><div> <table class="contentpaneopen">
...
</table>

<div class="pageBottomContent">
<div class="pageBanner">
</div>

<div class="pageLegals">
</div>

<div class="pageFooter">
</div>
<div class="footerBar"></div>
</div>

</div>
</div>

</body>
</html>

<!-- 1197050573 -->

CSS

* CSS Document */
p {
margin: 0px;
padding: 3px 0px 6px 0px;
text-align: left;
font-size: 11px;
line-height: 18px;
}

h3 {
margin: 0px;
padding: 3px 0px 0px 0px;
font-family: arial, helvetica, sans-serif;
color: #cccccc;
font-weight: bold;
font-size: 14px;
text-align: left;
}



body.private {
padding: 0px;
margin: 0px;
text-align: left;
border: none;
background-image: url(../images/bk2.png);
height: 100%;
background-color: #ff0000;
}

div#publiclogo {
background-image: url(/images/stories/templateimages/prelogon-logo.png);
background-repeat: no-repeat;
clear: both;
height: 66px;
}

div.bodyInner {
padding: 0px;
margin: 0px;
text-align: left;
border: none;
width: 100%;
height: 100%;
background-repeat: repeat;
}


div.pageContainer {
text-align: left;
margin: 0px;
padding: 0px;
background-color: #ffffff;
height: 100%;
width: 798px;
}

div.pageTopContent {
padding: 0px;
margin: 0px;
margin: auto;
border: none; /** XXX **/
text-align: left;
}

div.border-outer {

background-color: #ffffff;
border: 1px solid #333333;
height: 100%;
padding: 0px 2px 0px 0px;
width: 800px;
margin: auto;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}

div.pageTop {

padding: 0px 10px 0px 0px ;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #ffffff;
text-align: right;
background-color: #000000;
height: 20px;
text-align: left;
}



table.blog {
margin: 6px;
}

table.pageMain {
padding: 0px;
margin: 0px;
text-align: left;
background-color: #ffffff;
width: 100%;
vertical-align: top;
border: none;
border-collapse: collapse;
}


table.pageMain td {
padding: 0px;
margin: 0px;
}

td.pageLeft {
padding: 2px 0px 0px 0px;
margin: 0px;
width: 170px;
text-align: left;
background-color: #686b90;
border: 1px solid #999999;
vertical-align: top;
}

td.pageBodyContent {
padding: 0px;
margin: 10px;
border: none;
width: 584px;
text-align: left;
background-color: #ffffff;
vertical-align: top;
}



li {
line-height: 15px;
padding-left: 12px;
margin-left: 4px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}

td, div {
text-align: left;
font-size: 11px;
padding: 0px;
margin: 0px;
}
table.moduletable {
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-spacing: 0px;
border-collapse: collapse;
font-weight: normal;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

div.moduletable {
width: 100%;
font-weight: normal;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
color: #404040;
border-bottom: 1px solid #ffffff;
vertical-align: middle;
}

div.moduletable a:link, div.moduletable a:visited {
padding: 0px;
margin: 0px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}

div.moduletable a:hover {
color: #000000;
text-decoration: none;
font-weight: bold;
padding: 0px;
margin: 0px;
}

table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpaneopen td {
padding-right: 0px;
}

table.moduletable th, div.moduletable h3 {
color: #ffffff;
background-color: #000000;
text-align: left;
height: 21px;
line-height: 15px;
font-weight: normal;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: lowercase;
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
}

table.pollstableborder td {
padding: 2px;
}

.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}

.sectiontablefooter {
}

div.moduletable {
padding: 0px 0px 0px 0px;
margin-bottom: 0px;
color: #000000;
width: 100%;
}

div.moduletable a:link, div.moduletable a:visited {
Xcolor: #707070;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}

div.moduletable a:hover {
color: #000000;
text-decoration: none;
font-weight: normal;
}

table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
height: 100%;
}

table.contentpaneopen td {
padding-right: 0px;
}

table.moduletable th {
background: url(../images/subhead_bg.png) repeat-x;
color: #ffffff;
text-align: left;
padding-left: 6px;
padding-bottom: 4px;
height: 21px;
line-height: 15px;
font-weight: normal;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: lowercase;
margin: 6px 0px 4px 0px;
}


a.mainlevel:link, a.mainlevel:visited {
display: block;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #404a9e;
text-align: left;
padding: 3px 0px 0px 0px;
margin: 0px;
height: 18px !important;
height: 23px;
width: 100%;
text-decoration: none;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #666666;
}

a.mainlevel:hover {
text-decoration: none;
color: #ffffff;
background-color: #999999;
}

a.mainlevel#active_menu {
color:#333333;
font-weight: bold;
}

a.mainlevel#active_menu:hover {
color: #ffffff;
}

a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #404a9e;
text-align: left;
}

a.sublevel:hover {
color: #900;
text-decoration: none;
}

a.sublevel#active_menu {
color: #333;
}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
border: 1px solid #000000;
background-color: #ffff00;
}


form {
/* removes space below form elements */
margin: 0;
padding: 0;
}
drhansenjr
12-07-2007, 02:58 PM
I have a table cell containing a div in a page that is ending up with an unwanted 9px of padding/margin in IE that does not appear in Firefox. The gap appears in the area of the red circle in the attached screenshot.

The blue region is defined by td.pageLeft, and the mysterious gap to the right falls between the right boundary of the div.moduletable and inside of the td.pageLeft container.

The relevant generated page source and css follow (I can't give a link to the live site due to confidentiality issues).

Thanks!!

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to mysite.com - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://www.mysite.com/templates/mytemplate1/css/template_css.css"
rel="stylesheet" type="text/css" ></link>
</head>
<body>
<div class="border-outer">

<div class="pageContainer">
<div class="pageTopContent">
<div class="pageHeader">
</div>

</div>
<table class="pageMain">
<tr>
<td class="pageLeft">

<div class="moduletable">
<div style="width:100%; overflow: hidden; padding:0px; border-width:0px; margin:0px;">
<form action="http://www.mysite.com/index.php?option=com_comprofiler&amp;task=logout" method="post" id="mod_login_logoutform" style="margin:0px;">
<span id="mod_login_greeting">Hi, drhansenjr</span>&nbsp;<input type="submit" name="Submit" class="button" value="Logout" />
<input type="hidden" name="op2" value="logout" />
</form></div> </div>
<div class="moduletable">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="http://www.mysite.com/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="http://www.mysite.com/index.php?option=com_comprofiler&amp;Itemid=26" class="mainlevel" >My Profile</a></td></tr>

</table> </div>
</td>

<td class="pageBodyContent">

<table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top"><div> <table class="contentpaneopen">
...
</table>

<div class="pageBottomContent">
<div class="pageBanner">
</div>

<div class="pageLegals">
</div>

<div class="pageFooter">
</div>
<div class="footerBar"></div>
</div>

</div>
</div>

</body>
</html>

<!-- 1197050573 -->

CSS

* CSS Document */
p {
margin: 0px;
padding: 3px 0px 6px 0px;
text-align: left;
font-size: 11px;
line-height: 18px;
}

h3 {
margin: 0px;
padding: 3px 0px 0px 0px;
font-family: arial, helvetica, sans-serif;
color: #cccccc;
font-weight: bold;
font-size: 14px;
text-align: left;
}



body.private {
padding: 0px;
margin: 0px;
text-align: left;
border: none;
background-image: url(../images/bk2.png);
height: 100%;
background-color: #ff0000;
}

div#publiclogo {
background-image: url(/images/stories/templateimages/prelogon-logo.png);
background-repeat: no-repeat;
clear: both;
height: 66px;
}

div.bodyInner {
padding: 0px;
margin: 0px;
text-align: left;
border: none;
width: 100%;
height: 100%;
background-repeat: repeat;
}


div.pageContainer {
text-align: left;
margin: 0px;
padding: 0px;
background-color: #ffffff;
height: 100%;
width: 798px;
}

div.pageTopContent {
padding: 0px;
margin: 0px;
margin: auto;
border: none; /** XXX **/
text-align: left;
}

div.border-outer {

background-color: #ffffff;
border: 1px solid #333333;
height: 100%;
padding: 0px 2px 0px 0px;
width: 800px;
margin: auto;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}

div.pageTop {

padding: 0px 10px 0px 0px ;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #ffffff;
text-align: right;
background-color: #000000;
height: 20px;
text-align: left;
}



table.blog {
margin: 6px;
}

table.pageMain {
padding: 0px;
margin: 0px;
text-align: left;
background-color: #ffffff;
width: 100%;
vertical-align: top;
border: none;
border-collapse: collapse;
}


table.pageMain td {
padding: 0px;
margin: 0px;
}

td.pageLeft {
padding: 2px 0px 0px 0px;
margin: 0px;
width: 170px;
text-align: left;
background-color: #686b90;
border: 1px solid #999999;
vertical-align: top;
}

td.pageBodyContent {
padding: 0px;
margin: 10px;
border: none;
width: 584px;
text-align: left;
background-color: #ffffff;
vertical-align: top;
}



li {
line-height: 15px;
padding-left: 12px;
margin-left: 4px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}

td, div {
text-align: left;
font-size: 11px;
padding: 0px;
margin: 0px;
}
table.moduletable {
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-spacing: 0px;
border-collapse: collapse;
font-weight: normal;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

div.moduletable {
width: 100%;
font-weight: normal;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
color: #404040;
border-bottom: 1px solid #ffffff;
vertical-align: middle;
}

div.moduletable a:link, div.moduletable a:visited {
padding: 0px;
margin: 0px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}

div.moduletable a:hover {
color: #000000;
text-decoration: none;
font-weight: bold;
padding: 0px;
margin: 0px;
}

table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpaneopen td {
padding-right: 0px;
}

table.moduletable th, div.moduletable h3 {
color: #ffffff;
background-color: #000000;
text-align: left;
height: 21px;
line-height: 15px;
font-weight: normal;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: lowercase;
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
}

table.pollstableborder td {
padding: 2px;
}

.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}

.sectiontablefooter {
}

div.moduletable {
padding: 0px 0px 0px 0px;
margin-bottom: 0px;
color: #000000;
width: 100%;
}

div.moduletable a:link, div.moduletable a:visited {
Xcolor: #707070;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}

div.moduletable a:hover {
color: #000000;
text-decoration: none;
font-weight: normal;
}

table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
height: 100%;
}

table.contentpaneopen td {
padding-right: 0px;
}

table.moduletable th {
background: url(../images/subhead_bg.png) repeat-x;
color: #ffffff;
text-align: left;
padding-left: 6px;
padding-bottom: 4px;
height: 21px;
line-height: 15px;
font-weight: normal;
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: lowercase;
margin: 6px 0px 4px 0px;
}


a.mainlevel:link, a.mainlevel:visited {
display: block;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #404a9e;
text-align: left;
padding: 3px 0px 0px 0px;
margin: 0px;
height: 18px !important;
height: 23px;
width: 100%;
text-decoration: none;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #666666;
}

a.mainlevel:hover {
text-decoration: none;
color: #ffffff;
background-color: #999999;
}

a.mainlevel#active_menu {
color:#333333;
font-weight: bold;
}

a.mainlevel#active_menu:hover {
color: #ffffff;
}

a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #404a9e;
text-align: left;
}

a.sublevel:hover {
color: #900;
text-decoration: none;
}

a.sublevel#active_menu {
color: #333;
}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
border: 1px solid #000000;
background-color: #ffff00;
}


form {
/* removes space below form elements */
margin: 0;
padding: 0;
}
ryanbutler
12-07-2007, 03:00 PM
I doubt this is the culprit of the gap, but you're throwing IE into quirks mode with this line:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Remove it unless there's a reason for it.
drhansenjr
12-07-2007, 03:00 PM
Looks like the attachment to the above didn't take. Here it is.
dtm32236
12-07-2007, 03:10 PM
i would try validating your page (http://validator.w3.org/). see if there are any coding errors, and fix them. this is usually the problem.

also, padding:0px 0px 0px 0px; can be written as padding:0;
and the same goes for margin... just so you know.
drhansenjr
12-07-2007, 03:19 PM
i would try validating your page

That was one of the first things I did. Both came up clean.

also, padding:0px 0px 0px 0px; can be written as padding:0;

I know. I just find it's easier to tweak the individual parts that way.
dtm32236
12-07-2007, 03:37 PM
fair enough...

i don't see why you're getting that extra spacing.

it's something weird with IE's default CSS vs. Firefox's. That's why I start all my stylesheets with:

* {margin:0; padding:0;}

this resets all elements in your CSS to no padding or margin.

it may be too late for that though - doing that may mess up your entire page.

i don't know what to tell you here. hopefully someone else can help you out better.

good luck with it.
dtm32236
12-07-2007, 03:44 PM
http://www.webdeveloper.com/forum/showthread.php?t=168039
drhansenjr
12-07-2007, 03:46 PM
I tried adding that and it had no effect whatsoever. Thanks for the suggestion, though.
dtm32236
12-07-2007, 03:52 PM
sorry, i don't know what's wrong there - but i think that it looks fine with the gap.
Varelei
12-10-2007, 06:38 AM
It's an IE glitch, as far as I know. There are ways to hide it, but I'm not sure as to how to remove it. I seem to hide it one way or another in my designs, :). Or add some spacing to your navigation buttons/images/links so they're centered, and it looks a little more orderly. Should also look alright in FF, then.