I have an issue with a table containing three cells in one row. Two of these (left and right) have fixed width/height and should display an image (or shrink to 0 when no image is present). The middle cell takes the remaining space withing the fixed total with of the table.
The problem: now I end up with 3px of extra space by which the 'image containers' seem to expand (below the cells). You can see it by inspecting the 'starredunread' element for example, it grows from 20px to 23px in height. And I have no idea what's happening as the margin / padding is already turned off by default and border:0 and border-collapse: collapse doesn't help.
Here's the CSS file:
/*------------------------------------------
Reset (from the Yahoo UI Library)
------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table{border-collapse:collapse;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0}
a{outline: none;}
/*------------------------------------------
Interface
------------------------------------------*/
body {
top: 0px;
left: 0px;
width: 320px;
height: 480px;
background-color: #f00;
color: #000;
font-family: helvetica, arial, sans-serif;
font-size: 12px;
}
.header {
display: table;
top: 0px;
left: 0px;
width: 320px;
height: 44px;
background-color: #738ba3;
color: #fff;
table-layout: fixed;
border: 0;
border-spacing: 0;
}
.headerrow {
display: table-row;
}
.text {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 2px;
vertical-align: middle;
}
.text b {
font-weight: 700;
font-size: 11pt;
}
.date {
display: table-cell;
width: 50px;
vertical-align: middle;
text-align: right;
font-size: 8pt;
padding-top: 3px;
padding-right: 5px;
}
.date b {
font-weight: 700;
line-height: 11pt;
}
.starredunread {
display: table-cell;
top: 0px;
left: 0px;
width: 20px;
height: 44px;
vertical-align: middle;
}
.icon {
display: table-cell;
top: 0px;
right: 0px;
width: 44px;
height: 44px;
}
.content {
display: table;
width: 320px;
background-color: #fff;
color: #000;
font-size: 12pt;
text-align: left;
padding: 15px;
}
.sectionheader {
height: 20px;
}
.sectionheaderrow {
}
.sectionunread {
height: 20px;
}
.sectiontext {
font-weight: 700;
font-size: 9pt;
padding-top: 1px;
}
.smallicon {
width: 20px;
height: 20px;
}
And here's the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>testHTML</title>
<link rel="stylesheet" href="test.css" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="headerrow">
<div class="starredunread">
<img src="images/testimg_small.png">
</div><!-- end starredunread -->
<div class="text">
<b>Testheader</b><br>
Text for testing - this should overflow with an ellipsis if the text exceeds the size of the container...
</div><!-- end text -->
<div class="date">
<b>11.11.09</b><br>
18:54
</div><!-- end date -->
<div class="icon">
<img src="images/testimg_44x44.png">
</div><!-- end icon -->
</div><!-- end headerrow -->
</div> <!-- end header -->
<div class="content">
More text for testing purposes.<br><br>Not really relevant.<br><br> So don't waste your time reading this. :o)
</div><!-- end content -->
<div class="header sectionheader">
<div class="headerrow sectionheaderrow">
<div class="starredunread sectionunread">
<img src="images/testheader.png">
</div><!-- end sectionunread -->
<div class="text sectiontext">
Another Header
</div><!-- end sectiontext" -->
<div class="icon smallicon">
<img src="images/testimg_20x20.png">
</div><!-- end smallicon -->
</div><!-- end sectionheaderrow -->
</div><!-- end sectionheader -->
</body>
</html>
... doesn't look too nice without the images but it demonstrates my problem anyway.
Any idea what I'm doing wrong? Thanks a lot for your input! The code only needs to work in Safari / Webkit.
Cheers, Florian