I was having a curious problem that I finally found a solution to, but I’m not sure why it happens. I have a page that is being generated by PHP, so the resulting HTML is not always nicely formatted. Here’s the relevant code:
<html>
<head>
<style>
body {background-color: #99ccff;}
div#content {
margin: 0 auto;
text-align: center;
}
div#results_header {
background-color: white;
display: inline-block;
font-family: sans-serif;
font-size: 12px;
margin: 5px 9px 0;
padding-left: 18px;
padding-top: 5px;
text-align: left;
border-bottom: 1px solid;
}
div.header {
display: inline-block;
font-weight: bold;
padding-bottom: 5px;
}
div#ships {
background-color: white;
display: inline-block;
font-family: sans-serif;
font-size: 12px;
height: 180px;
margin: 0 9px 9px;
overflow-y: auto;
padding-left: 18px;
text-align: left;
}
div.status {width: 10px;}
div.name {width: 260px;}
div.flag {width: 40px;}
div.type {width: 50px;}
div.sconum {width: 70px;}
div.call_sign {width: 80px;}
div.imo_number {width: 70px;}
div.upseq {width: 140px;}
div.photo {width: 50px;}
div.my_photo {width: 50px;}
</style>
</head>
<body>
<div id="content" style="width: 880px;">
<div id="results_header" style="width: 840px;">
<div class="name header">Name</div>
<div class="flag header">Flag</div>
<div class="type header">Type</div>
<div class="sconum header">SCONUM</div>
<div class="call_sign header">Call Sign</div>
<div class="imo_number header">IMO #</div>
<div class="upseq header">UPSEQ</div>
<div class="photo header">Photo</div>
<div class="my_photo header">My Photo</div>
</div>
<div id="ships" style="width: 840px;"></div>
</div>
</body>
</html>
I formatted it for readability (the CSS is actually in an external file, for instance). The page is actually generated by PHP so it doesn’t look nearly as pretty as this. Therein lies the problem. What I posted above displays fine and consistent in all browsers. When I remove the whitespace before the “ships” div, it is misaligned in Chrome (Firefox looks fine, haven’t had a chance to test in IE yet).
<body>
<div id="content" style="width: 880px;">
<div id="results_header" style="width: 840px;">
<div class="name header">Name</div>
<div class="flag header">Flag</div>
<div class="type header">Type</div>
<div class="sconum header">SCONUM</div>
<div class="call_sign header">Call Sign</div>
<div class="imo_number header">IMO #</div>
<div class="upseq header">UPSEQ</div>
<div class="photo header">Photo</div>
<div class="my_photo header">My Photo</div>
</div>
<div id="ships" style="width: 840px;"></div>
</div>
</body>
</html>
Again, easily fixed, but I’m curious why this is happening at all.
Because it’s styled as an inline block. As it’s inline, whitespace is significant. Use display:block; to avoid this.