Bug 18095 – minor layout problem because of insufficient width of inner <div>s

• Component: CSS
• Status: RESOLVED INVALID

[jasneet]

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

[jasneet]

Created attachment 20067 [details]
screenshot

[jasneet]

Created attachment 20068 [details]
reduction

[Sylvan Korvus]

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>

[Tab Atkins]

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.