Menu
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.
279
asked Nov 11 '09 18:11
Place both DIVs into a container DIV that's set to 100% of page height and set both interior DIVS to 100%. They will fill up the container DIV and the height of both will be equal.
Method 1: First method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div. Consider this HTML for demonstration: HTML.
Tutorial Categories: In IE7, if you have a table cell with an image displayed in it, you may have noticed a small space underneath the image in the table cell. This space occurs in IE7 but not Firefox. This space can be removed by setting the style of the image to be 'block' rather than 'inline'.
Using inline-block property: Use display: inline-block property to set a div size according to its content.
In strict mode images are inline by default, since you're using strict you need to fix this manually by applying display:block to your images.
"In the early days, experiments with strict mode invariably raised the comment that images suddenly got an odd bottom margin that couldn’t be removed. The cause was that in strict mode is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn’t have descender characters, so the space was never used, but it still had to be reserved.
The solution was to explicitly declare images block level elements: img {display: block}."
http://www.quirksmode.org/css/quirksmode.html
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
