Use of DL on page with float left, following HTML element also gets lined up to final DD element

• Component: Layout and Rendering
• Status: UNCONFIRMED ---

[Matt Gray]

The main content of http://www.mbf.com.au is shifted off to the right of screen.  

They are using a DL with the DDs set to float left, to make the horizontal menu.  The DIV that follows the closed DL then gets aligned to the left of one of the DDs.  

I have a reduced test case... will attach.  It seems that if you set the font-size of the body to something between 56-71%, it will trigger the following div to move to the right... values outside this range seem fine.  Also, if you put a border around either the DD or the following DIV, it will render correctly. 

The MBF page has this problem on Safari 3 and 4, but is rendered correctly on Firefox and IE.

Maybe similar to Bug 18273?  That seemed to be something to do with using DD...

[Matt Gray]

Created attachment 30168 [details]
test case

[Matt Gray]

Created attachment 30169 [details]
screenshot of problem

[Mark Rowe (bdash)]

Which version of WebKit did you test with?  <http://www.mbf.com.au/> renders correctly for me with a build of WebKit from this afternoon.

[Matt Gray]

The error is with (5528.16, r43039) and earlier.  The error has been around for a long long time so I didn't think to check today's build, but maybe it has been fixed recently. 

[Matt Gray]

Just tested the latest nightly build - Version 4 Public Beta (5528.16, r43444).  

Still not laid out correctly - the main content of the page is way off to the right of where it should be. 

[Ahmad Saleem]

I am not sure on the expected output but using attached test case:

Safari Technology Preview 160 & Safari 16.2 show "This is a test... I should be.." line on left side as left-aligned. It matches with Firefox Nightly 110 while Chrome Canary 111 show it is as "center" aligned.

Just wanted to share updated results and will tag others to confirm. Thanks!

[Karl Dubost]

So obviously the initial design of https://mfb.com.au/ has changed. 

The behavior of Safari is aligned with the one of Safari. 
But the test case is probably not obvious. Having a better test case would probably help to better understand.

But just removing the margin on 

dl#mbfNav {
    margin: 0 10px 0 10px;
    min-height: 27px;
    height: 2.4em;
}

fixes the issue on Chrome. 


hmmm… but… there is always a but… playing with zoom values, it changes the behavior.

It jumps in between states of next line and beside. So probably related to the boxes.

The real fix is clear:both.

At least it is resilient to zoom in Firefox.

[Radar WebKit Bug Importer]

<rdar://problem/122588520>