Forum Moderators: not2easy
<code>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background-color: #FFFFFF; /* gets overwritten by container */
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
#container {
width: 700px;
background: #d0d0d0;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 21px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
overflow: hidden;
}
#header {
border-bottom: solid 2px #202020;
border-top: solid 2px #202020;
background-color: #ff0000;
height: 100px;
}
#sidebar1 {
float: left;
width: 225px; /* since this element is floated, a width must be given */
background: #00ff00;
height: 200px;
}
#sidebar1 table {
background-color: #ff0;
}
#sidebar1 h3 {
color: #f00;
margin: 0 0 0 0;
}
#sidebar1 td {
height: 60px;
vertical-align: bottom;
}
#sidebartitle {
background: #000000;
height: 60px;
text-align: center;
}
.centeredtable {
margin-left: auto;
margin-right: auto;
}
#mainContent {
background: #0000ff;
border: solid 0px #202020;
float: right;
width: 410px;
margin: 15px 15px 0px 15px;
padding: 0 15px 0px 15px;
position: relative;
height: 185px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="sidebar1">
<div id="sidebartitle">
<table class="centeredtable"><tr><td><h3>Title</h3></td></tr></table>
</div>
</div>
<div id="mainContent">
</div>
</div>
</body>
</html>
</code>
#sidebartitle {
background: #000000;
height: 64px;
text-align: center;
}
In Internet Explorer this works perfectly.
Because IE treats height the same as min-height, IE is actually stretching the container to accommodate your Title. FF is rendering this correctly, fixing the height of the container to 60px. You could also try adding
overflow:hiddento #sidebartitle in order to prevent it from being stretched - this should also render the same in FF and IE.
Thanks again.
Is it the cell spacing or padding between the td area and the outside area of the table is causing the need to increasing the height from 60 to 64?
Yes, I believe so - both.
<table class="centeredtable" cellpadding="0" cellspacing="0">
Setting the cellpadding and cellspacing to 0 should get rid of it. Unfortunately I believe this is the only way to remove the extra spacing cross-browser. IE6 (and IE7 - I think?) do not properly support the necessary CSS properties '
border-collapse' and '
border-spacing'.
[w3.org...]
I'd not risk mixing the old cellpadding/cellspacing in the HTML with CSS, but that's just me.
Instead, I'd se "border-spacing" if you're not collpasing borders in tables.
I'd not risk mixing the old cellpadding/cellspacing in the HTML with CSS, but that's just me.
Instead, I'd se "border-spacing" if you're not collpasing borders in tables.
But "
border-spacing" is not supported at all by IE?
cellpadding/
cellspacingare not deprecated attributes and I would have thought setting these to 0 was a common starting point for many?
I actually seem to have always settled on border-collapse:collapse so I've never even touched border-spacing in IE as I've always settles on other ways before I got to even look at it in IE.
But my tables are just <table class="..."> (or perhaps an id), I've never felt the need to add layout to the table tag in html since I started to use CSS.
I actually seem to have always settled on border-collapse:collapse so I've never even touched border-spacing in IE as I've always settles on other ways before I got to even look at it in IE.
I think this is OK if you don't want any cellspacing ('border-spacing' in CSS) and the cellspacing attribute has not been specified, as IE will not then override it.
Setting the cellpadding and cellspacing to 0 should get rid of it. Unfortunately I believe this is the only way to remove the extra spacing cross-browser.
May be I was a bit hasty - setting the attributes to 0 is not the only way ;) Setting
border-collapse:collapseon the table and
#sidebar1 td {padding:0;} should also do the job of eliminating the extra spacing/padding. Thanks swa66.
