<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body>
<p>
<div>
<b><a class="bz_bug_link
bz_status_NEW "
title="NEW - Unwanted vertical single-pixel gap appears between floated elements"
href="https://bugs.webkit.org/show_bug.cgi?id=145805#c2">Comment # 2</a>
on <a class="bz_bug_link
bz_status_NEW "
title="NEW - Unwanted vertical single-pixel gap appears between floated elements"
href="https://bugs.webkit.org/show_bug.cgi?id=145805">bug 145805</a>
from <span class="vcard"><a class="email" href="mailto:Richard@Hallas.net" title="Richard Hallas <Richard@Hallas.net>"> <span class="fn">Richard Hallas</span></a>
</span></b>
<pre>zalan: Thank you very much for those extremely helpful comments.
The reason why the container was set to inline-table was to do with what happens if the page isn't wide enough to accommodate all the text (i.e. if the breadcrumbs text becomes very long and the page happens to be very narrow). With inline-table set, the browser splits up and rewraps the content, and it remains visible; without it, the content pops off the bottom of the page.
Anyway, after a little experimentation I've fixed the problem by removing the float: right; from the 'pageidtext' element. I can't remember at this stage why both elements were floated (perhaps that was a mistake), but I don't think they needed to be. By ceasing to float the text component and retaining the inline-table setting of the parent element, it continues to work as before in very narrow confines, but the pixel-gap problem goes away.
So, my site is fixed; great! Thanks again.
I still think it was worth reporting the problem, though, because the pixel-gap behaviour is new to recent versions of WebKit (it didn't exist when I created the site).</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>