155124 - CNET Renders Incorrectly

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Matthew]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.1a) Gecko/20020610
BuildID:    2002061108

The CNET webpage renders incorrectly in Linux. The middle part expands larger
than the top two parts. It looks fine if you reduce the font to 90% after the
page has loaded, but isn't fixed by knocking down the font size in Preferences.
This has only occurred using the Linux version of Mozilla. The Win32 version
renders it fine.

Reproducible: Always
Steps to Reproduce:
1.Go to http://www.cnet.com

Actual Results:  The webpage rendered incorrectly.

Expected Results:  The middle should have lined up wtih the top and bottom.

Comment 1

[Matthew]

Attachment: A screenshot of the website with the error...

Comment 2

[Andrew Schultz]

the problem is with the text input box near the bottom of the page (your email
here).  The page specifies it to be size=16 which.  The font is defined in
http://a.r.tv.com/cnet.1d/css/nn_lx.css

.txtfld { font-family : monospace;
		  font-size: 14px }

monospace=courier, and 14px is pretty big for courier.

I'm don't see anything about Mozilla's behavior here that is incorrect...

Comment 3

[Boris Zbarsky [:bzbarsky]]

Matthew, do you actually have a 14px font for your selected monospace
font-family?  (xfontsel or gfontsel should be able to tell you that).

Comment 4

[Matthew]

Not quite sure how to use xfontsel to determine this. However I've been using
the trebuchet MS font as my monospace in Mozilla, set at 12 pt. However
obviously the style sheet would override the font size. Changing the font to
adobe times seems to allow the webpage to render fine.

Comment 5

[Boris Zbarsky [:bzbarsky]]

You can just use xfontsel to select the font-family and foundry you have picked
as your default monospace font in preferences.  Then look at the list of
available pixel font sizes... (gfontsel will let you do the same if you have it
installed and may be easier to use).

Comment 6

[Michael Gabriel]

layout has changed

Comment 7

[Kenneth Herron]

As noted in comment 6, the layout for the sample URL has changed. It still has
some similar layout problems, however. The top of the page contains a gray bar
with a "Search" graphic next to a a text entry field and a selector. Mozilla
lays out the text field and the selector one above the other and they have a
total height of 43 pixels. The search graphic is only 37 pixels high, so the
selector appears to be laid out poorly.

The cnet news site, <http://news.com.com/>, displays something close to the
original report. There's a signup box for a newsletter at the bottom of the
page, containing a 16-character text entry field for monospace (courier for me)
14px. The box comes out to 153 pixels and is flanked by two 10-pixel spacer
images, but the graphics above and below the box are only 160 pixels wide.
Clearly the page designer assumed the text-entry box would be 140 pixels wide or
less.

These are just layout problems based on invalid assumptions about the size of fonts.