Geek Answers Handbook

Getting unwanted 1px extra height per div element in Safari

I have a problem with a table containing three cells in one row. Two of them (left and right) have a fixed width / height and should display the image (or shrink to 0 when the image is missing). The middle cell takes the remaining space with a fixed table total.

Problem: now I get 3px of extra space over which the "image containers" expand (below the cells). You can see this by checking, for example, the starredunread element, it grows from 20 to 23 pixels in height. And I have no idea what happens when margin / padding is already disabled by default and border: 0 and border-collapse: crashing doesn't help.

Here is 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 is 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 pretty without images, but still demonstrates my problem.

Any idea what I'm doing wrong? Thanks so much for your input! The code should only work in Safari / Webkit.

+6
html css safari css-tables
source share
2 answers

In strict mode, images are embedded by default, since you use strict, you need to fix this manually by applying display:block to your images.

“In the early days of strict mode experiments, they invariably raised a comment that the images suddenly received an odd bottom field that could not be removed. The fact is that in strict mode it is an inline element, which means that some space should be reserved for possible such like g, j or q. Of course, the image has no descender, so the space was never used, but still had to be reserved.

The solution was to explicitly declare image block level elements: img {display: block}. "

http://www.quirksmode.org/css/quirksmode.html

+10
source share

I had a similar problem. As a rule, you should prohibit margins and indents on ALL css elements with the following markup (preferably at the beginning of your stylesheet): * {fields: 0; filling: 0; }

The critical value is "*". This saves several hours of frustration. After that, if you have a text cell, it might seem that half of the em pad is still at the top, but this is because most text characters are shorter than em.

0
source share

More articles:


All Articles