Bug 25681 - Use of DL on page with float left, following HTML element also gets lined up to final DD element
Summary: Use of DL on page with float left, following HTML element also gets lined up ...
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.5
: P2 Normal
Assignee: Nobody
URL: http://www.mbf.com.au
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2009-05-10 19:20 PDT by Matt Gray
Modified: 2024-02-08 15:46 PST (History)
8 users (show)

See Also:

Attachments
test case (819 bytes, text/html)
2009-05-10 19:22 PDT, Matt Gray 		no flags Details
screenshot of problem (82.31 KB, image/png)
2009-05-10 19:24 PDT, Matt Gray 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Gray 2009-05-10 19:20:55 PDT 
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...
Comment 1 Matt Gray 2009-05-10 19:22:08 PDT 
Created attachment 30168 [details]
test case
Comment 2 Matt Gray 2009-05-10 19:24:44 PDT 
Created attachment 30169 [details]
screenshot of problem
Comment 3 Mark Rowe (bdash) 2009-05-10 20:01:19 PDT 
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.
Comment 4 Matt Gray 2009-05-10 20:31:42 PDT 
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.
Comment 5 Matt Gray 2009-05-10 20:37:22 PDT 
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.
Comment 6 Ahmad Saleem 2023-01-12 05:20:50 PST 
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!
Comment 7 Karl Dubost 2023-01-12 23:25:09 PST 
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.
Comment 8 Radar WebKit Bug Importer 2024-02-08 15:46:14 PST 
<rdar://problem/122588520>