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

Articles tagged with markup

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: markup Jul 25, 2008 ● updated Oct 14, 2008 ● 2 comments

Subscribe

Browse by Tag