Safari bug with DLs and floats

Is this your first visit? You may want to subscribe to the feed.

Safari bug with DLs and floats

I came across a weird Safari bug today and couldn’t find any other mention of it on the interwebs. Here’s the CSS and HTML to reproduce it:

dt {
  width: 200px;
  float: left;
}
dd {
  margin: 0 0 0 200px;
}
dd p {
  float: left;
}

<dl>
  <dt>term</dt>
  <dd>
      <p>p1</p>
      <p>p2</p>
      <p>p3</p>
  </dd>
</dl>

With Float

What’s happening is that safari is adding a right margin to the dd, even though it is explicitly set to 0. Removing either the float: left from the dt, or position: overflow from the dd (which is used to clear the floats) makes the right margin go away. Very odd.

Without Float

My ultimate solution was just to add a div inside the dd that set overflow:hidden to clear the floats.

Solution

Code: browser, bug, css, CSS, html, markup, safari Jul 25, 2008 ● updated Oct 14, 2008 ● 2 comments

2 comments

I have a similar problem, I think its the same bug although the trigger is somewhat different and I currently have no fix for it: http://geek.co.il/articles/webkit-margin-with-float-bug.html

What happens, is that there is a block that floats to the left, and to the right of it is several blocks that I want to all be aligned horizontally. so I add a margin-left that is bigger then the size of the float. I also have “overflow: hidden” for another reason that I won’t expand on, but it can’t go.

What actually happens is that for the blocks to the side of the float, webkit (both Safari and Chrome) puts what appears to be a right margin that is the size of the float. The only way around this is to turn off either the overflow: hidden or the margin-left.

Oded June 04, 2009 at 03:55 PM
Setting an fixed-width (if the layout can accommodate it) will help to override the phantom margin-right. I’m having to resort to this myself.

Dave May 06, 2010 at 06:36 PM

opensoul.org