opensoul.org - Safari bug with DLs and floats Changes tag:opensoul.org,2010:/2008/7/25/safari-bug-with-dls-and-floats/changes Mephisto Drax 2008-07-25T14:48:16Z brandon tag:opensoul.org,2008-07-25:465:4 2008-07-25T14:35:00Z 2008-07-25T14:48:16Z Safari bug with DLs and floats <p>I came across a weird Safari bug today and couldn’t find any other mention of it on the interwebs. Here’s the <span class="caps">CSS</span> and <span class="caps">HTML</span> to reproduce it:</p> <pre><code class="css">dt { width: 200px; float: left; } dd { margin: 0 0 0 200px; } dd p { float: left; }</code></pre> <pre><code class="html">&lt;dl&gt; &lt;dt&gt;term&lt;/dt&gt; &lt;dd&gt; &lt;p&gt;p1&lt;/p&gt; &lt;p&gt;p2&lt;/p&gt; &lt;p&gt;p3&lt;/p&gt; &lt;/dd&gt; &lt;/dl&gt;</code></pre> <p></p> <p>What’s happening is that safari is adding a right margin to the <code>dd</code>, even though it is explicitly set to 0. Removing either the <code>float: left</code> from the <code>dt</code>, or <code>position: overflow</code> from the <code>dd</code> (which is used to clear the floats) makes the right margin go away. Very odd.</p> <p></p> <p>My ultimate solution was just to add a <code>div</code> inside the <code>dd</code> that set <code>overflow:hidden</code> to clear the floats.</p> <p></p> brandon tag:opensoul.org,2008-07-25:464:3 2008-07-25T14:35:00Z 2008-07-25T14:44:54Z Safari bug with DLs and floats <p>I came across a weird Safari bug today and couldn’t found any other mention of it on the interwebs. Here’s the <span class="caps">CSS</span> and <span class="caps">HTML</span> to reproduce it:</p> <pre><code class="css">dt { width: 200px; float: left; } dd { margin: 0 0 0 200px; } dd p { float: left; }</code></pre> <pre><code class="html">&lt;dl&gt; &lt;dt&gt;term&lt;/dt&gt; &lt;dd&gt; &lt;p&gt;p1&lt;/p&gt; &lt;p&gt;p2&lt;/p&gt; &lt;p&gt;p3&lt;/p&gt; &lt;/dd&gt; &lt;/dl&gt;</code></pre> <p></p> <p>What’s happening is that safari is adding a right margin to the <code>dd</code>, even though it is explicitly set to 0. Removing either the <code>float: left</code> from the <code>dt</code>, or <code>position: overflow</code> from the <code>dd</code> (which is used to clear the floats) makes the right margin go away. Very odd.</p> <p></p> <p>My ultimate solution was just to add a <code>div</code> inside the <code>dd</code> that set <code>overflow:hidden</code> to clear the floats.</p> <p></p> brandon tag:opensoul.org,2008-07-25:463:2 2008-07-25T14:35:00Z 2008-07-25T14:41:28Z Safari bug with DLs and floats <p>I came across a weird Safari bug today and couldn’t found any other mention of it on the interwebs. Here’s the <span class="caps">CSS</span> and <span class="caps">HTML</span> to reproduce it:</p> <pre><code class="css">dt { width: 200px; float: left; } dd { margin: 0 0 0 200px; } dd p { float: left; }</code></pre> <pre><code class="html">&lt;dl&gt; &lt;dt&gt;term&lt;/dt&gt; &lt;dd&gt; &lt;p&gt;p1&lt;/p&gt; &lt;p&gt;p2&lt;/p&gt; &lt;p&gt;p3&lt;/p&gt; &lt;/dd&gt; &lt;/dl&gt;</code></pre> <p></p> <p>What’s happening is that safari is adding a right margin to the <code>dd</code>, even though it is explicitly set to 0. Removing either the <code>float: left</code> from the <code>dt</code>, or <code>position: overflow</code> from the <code>dd</code> (which is used to clear the floats) makes the right margin go away. Very odd.</p> <p></p> <p>My ultimate solution was just to add a <code>div</code> inside the <code>dd</code> that set <code>overflow:hidden</code> to clear the floats.</p> <p></p> brandon tag:opensoul.org,2008-07-25:462:1 2008-07-25T14:35:40Z 2008-07-25T14:35:40Z Safari bug with DLs and floats <p>I came across a weird Safari bug today and couldn’t found any other mention of it on the interwebs. Here’s the <span class="caps">CSS</span> and <span class="caps">HTML</span> to reproduce it:</p> <pre><code class="css">dt { width: 200px; float: left; } dd { margin: 0 0 0 200px; } dd p { float: left; }</code></pre> <pre><code class="html">&lt;dl&gt; &lt;dt&gt;term&lt;/dt&gt; &lt;dd&gt; &lt;p&gt;p1&lt;/p&gt; &lt;p&gt;p2&lt;/p&gt; &lt;p&gt;p3&lt;/p&gt; &lt;/dd&gt; &lt;/dl&gt;</code></pre> <p></p> <p>What’s happening is that safari is adding a right margin to the <code>dd</code>, even though it is explicitly set to 0. Removing either the <code>float: left</code> from the <code>dt</code>, or <code>position: overflow</code> from the <code>dd</code> (which is used to clear the floats) makes the right margin go away. Very odd.</p> <p></p> <p>My ultimate solution was just to add a <code>div</code> inside the <code>dd</code> that set <code>overflow:hidden</code> to clear the floats.</p> <p></p>