Question

I’ve encountered a random issue in Webkit based browsers (tested in Chrome and Safari). On a website I maintain I’ve been updating the artwork we use for our error messages, and it looks great in all browsers except Webkit based browsers. The problem I am having seems to disappear when I toggle any CSS rule on or off through the Web Inspector.

The problem:

The spacing above the text-size controls shouldn’t be there, it should look like:

The annoying thing is that the spacing disappears when I toggle any css property in Web Inspector.

The HTML for the popup is:

<div class="popup">
  <div class="header">
    <div class="block"></div>
    <a class="normalFont" href="javascript:void(0);" title="Normal Font"><span>Normal Font</span></a>
    <a class="largerFont" href="javascript:void(0);" title="Larger Font"><span>Larger Font</span></a>
    <a class="largestFont" href="javascript:void(0);" title="Largest Font"><span>Largest Font</span></a>
    <a class="close" href="javascript:void(0);" title="Close"><span>Close</span></a>
  </div>
  <div class="message">...</div>
  <div class="footer"></div>
</div>

And the key part of the CSS is:

.popup
{
  width: 310px;
}

.popup .header
{
  height: 40px;
  margin: 0;
  padding: 0;
  background: url(...);
}

.popup .header .block
{
  float: left;
  height: 19px;
  width: 210px;
}

Where .block is applied to:

Does anyone know why this occurs and if there is a workaround?

Update: A live example (although using outdated graphics) is available here. Clicking an item such as ‘Medical Expenses’ in a Webkit browser displays the popup with spacing error.

Answer 1

This was due to a float issue that seemed to allow absolutely position elements sitting above the floated elements to affect how the elements was flowing within the absolutely positioned elements.