Bug 18095 - minor layout problem because of insufficient width of inner <div>s
Summary: minor layout problem because of insufficient width of inner <div>s
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.1)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
URL: http://www.pcpop.com/
Keywords: HasReduction
Depends on:
Blocks:
 
Reported: 2008-03-25 18:03 PDT by jasneet
Modified: 2011-10-20 01:17 PDT (History)
3 users (show)

See Also:


Attachments
screenshot (311.21 KB, image/gif)
2008-03-25 18:04 PDT, jasneet
no flags Details
reduction (1.01 KB, text/html)
2008-03-25 18:04 PDT, jasneet
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description jasneet 2008-03-25 18:03:25 PDT
I Steps:
Go to 
http://www.pcpop.com/

II Issue:
At the right side of the webpage, the 3rd section with search bar at the top (after login form and 2nd section) has incorrect layout.

III Conclusion:
The issue is caused by the insufficient width of the <div> with green borders. In the testcase, it is set to 146px. If I change it to 156px, then Safari renders correctly.

IV Other browsers:
IE7: ok
FF3: ok
Opera9.24: ok

V Nightly tested: 31238
Comment 1 jasneet 2008-03-25 18:04:20 PDT
Created attachment 20067 [details]
screenshot
Comment 2 jasneet 2008-03-25 18:04:59 PDT
Created attachment 20068 [details]
reduction
Comment 3 Sylvan Korvus 2008-03-25 18:34:54 PDT
I'm not sure this is a bug. Below is an excerpt of the section of the page in question. There are no linebreaks (<br>/<p>), it just wraps where it happens to wrap, which will depend entirely on the size of the text being rendered. You can see this by increasing/decreasing the font size in Firefox & Safari. 

HOWEVER, what Firefox is doing differently, is not wrapping the text in the middle of a word. Safari appears to be breaking words in the middle. I'm unsure of whether that's correct in Chinese typography; if it isn't, that may warrant a separate bug.

<DIV class=pop_3_right_content2 style="PADDING-TOP: 3px"><A href="http://product.pcpop.com/Mobile/00000_1.html">&#25163;&#26426;</A>&#12288;<A href="http://product.pcpop.com/DC/00000_1.html">&#25968;&#30721;&#30456;&#26426;</A>&#12288;<A href="http://product.pcpop.com/Camera/00000_1.html">&#25668;&#20687;&#22836;</A>&#12288;<A href="http://product.pcpop.com/MP3/00000_1.html">MP3</A> &#12288;<A href="http://product.pcpop.com/DV/00000_1.html">DV&#25668;&#20687;&#26426;</A>&#12288;<A href="http://product.pcpop.com/Flash/00000_1.html">&#38378;&#23384;&#21345;</A>&#12288;<A href="http://product.pcpop.com/MP4/00000_1.html">MP4</A>&#12288; <A href="http://product.pcpop.com/UDisk/00000_1.html">&#31227;&#21160;U&#30424;</A> &#12288;<A href="http://product.pcpop.com/Record_pen/00000_1.html">&#24405;&#38899;&#31508;</A>&#12288;<A href="http://product.pcpop.com/GPS/00000_1.html">GPS</A> &#12288;<A href="http://product.pcpop.com/MobileHDD/00000_1.html">&#31227;&#21160;&#30828;&#30424;</A>&#12288;<A href="http://product.pcpop.com/Digital.html">&#26356;&#22810;&gt;&gt;</A></DIV>
Comment 4 Tab Atkins 2011-10-20 01:17:46 PDT
It appears that this is simply a natural result of different browsers using different linebreaking algorithms.  This is allowed by the relevant specifications.  This could be easily fixed by either manually linebreaking the text, or using CSS to *prevent* linebreaking in the search form to avoid the button wrapping underneath the text field.

PCPop seems to have revamped their HTML anyway, so the problem no longer exists.  If our Chinese linebreaking is bad, please feel free to file another bug specifically about that.