Edit: I had some code posted here but I couldn't get it to reproduce. So here is the link to the problem:
http://stackmobile.quickmediasolutions.com/questions.php?site=stackoverflow
No matter what I do, there is still a gap between the table and the DIV. This occurs on Google Chrome 5.0.375.70 beta on Linux. (And it seems to occur on other Webkit-based browsers too.)
How can I get rid of the space?
Try zeroing the div margin too:
div {
margin:0;
}
This is the full page I used, it seemed to work for me:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<style type="text/css">
div {
width:2em;
height:2em;
background-color:black;
}
table {
background-color:red;
margin: 0px;
border-collapse: collapse;
padding: 0px;
}
</style>
</head>
<body>
<div></div>
<table>
<tr><td>Test</td></tr>
</table>
</body>
</html>
There might be a space character between the div and the table. If yes then try removing that.
Try giving
body
{
font-size: 1px;
}
and check whether the 4px has been reduced or not.
Try using the following CSS:-
div {
margin: 0px;
padding: 0px;
}
table {
margin: 0px;
border-collapse: collapse;
padding: 0px;
}
I finally fixed it!
All I needed to add was
height: 40px;
to
#topbar_logo {
float: left;
}