У меня проблема с таблицей, содержащей три ячейки в одной строке. Два из них (левый и правый) имеют фиксированную ширину / высоту и должны отображать изображение (или уменьшаться до 0, когда изображение отсутствует). Средняя ячейка занимает оставшееся пространство в пределах фиксированной суммы таблицы.
Проблема: теперь я получаю 3px дополнительного пространства, благодаря которому «контейнеры изображений», кажется, расширяются (ниже ячеек). Вы можете увидеть это, осмотрев, например, элемент «starredunread», высота которого увеличивается с 20 до 23 пикселей. И я понятия не имею, что происходит, так как поля / отступы по умолчанию уже отключены, а border: 0 и border-collapse: collapse не помогают.
Вот файл CSS:
/*------------------------------------------
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;
}
А вот и HTML-код:
<!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>
... без изображений выглядит не очень хорошо, но в любом случае это демонстрирует мою проблему.
Есть идеи, что я делаю не так? Большое спасибо за ваш вклад! Код должен работать только в Safari / Webkit.