i laying out website table, , logo goes in top row of table. logo transparent image green background, , in table red background. however, table cell not shrinking fit image vertically , showing of background red below image when don't want to. have tried setting margin , padding 0, setting cell-spacing , cell-padding 0, , removing borders, none of has worked.
my browser's page inspector tool shows td element responsible extending height of cell, not tr or table
what missing? feel simple.
html:
<!doctype html> <html> <head> <link rel="stylesheet" href="styles2.css" /> </head> <body> <div id="wrapper"> <table id="layouttable" > <tr> <td class="layouttabletd"> <img id="logoimage" src="res/logobar2.png"/> </td> </tr> </table> </div> </body> </html> css:
#wrapper { width: 1000px; margin-left: auto; margin-right: auto; } #layouttable { background-color: #ff0000; margin: 0px; padding: 0px; border-collapse: collapse; } #layouttable tr td.layouttabletd { border: 1px solid black; padding: 0px; margin: 0px; } #logoimage { background-color: #00ff00; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; } result: 
solved: http://jsfiddle.net/r0801v5v/
#layouttable { line-height:0; background-color: #ff0000; margin: 0px; padding: 0px; border-collapse: collapse; } notice added line-height:0; - not sure why happens i've seen before. hope helped.
Comments
Post a Comment