Problems with CSS in Mozilla

[Robert William Vesterman]

I'm having problems with the display of forms, using CSS, in Mozilla
Firebird (and probably other Mozilla-based browsers).

I have boiled it down to a fairly small example page, which not only
shows the problems, but explicitly points out what they are:

http://www.vesterman.com/CSSProblem.html

It uses the style sheet:

http://www.vesterman.com/Style/Default.css

The page is valid XHTML1.1; the style sheet is valid CSS 2.

Please take a look at it in Mozilla and IE; the way it looks in IE is
the way that I would like it to look.

Does anyone see what I'm doing wrong? Or, even if you don't see
anything I'm doing wrong, do you see another way to accomplish what
I'm trying to do?

Thanks in advance for any help.

Bob Vesterman.

[Christopher J. White]

>>>>> "bob" == Robert William Vesterman <bo*@vesterman.com> writes:

bob> I'm having problems with the display of forms, using CSS, in Mozilla
bob> Firebird (and probably other Mozilla-based browsers).

I think you are misunderstanding the use of float. Whenever you make
a div float, it pulls it out of the normal flow at lines it up to the
left or right, allowing content below it to fill in the extra space to
the side. Not sure if the bug is in Mozilla/Firebird or in IE as to
the proper rendering. Once you 'float: right' the content is not used
for calculating height of the parent box (unless a clear is used), so
the content may spill out of the parent box. That's what you're
seeing in Mozilla. In fact, there's a great example of exactly
this in the spec:

http://www.w3.org/TR/REC-CSS2/visuren.html#floats

This is also the reason that your formLineLeft and formLineRight
don't line up properly. The left stuff is pushed up to the
left as much as possible, the right stuff pushed up right.
Since the left lines are shorter, they bunch up.

Add a red border to formLineLeft, and a green border to formLineRight
and you can see how the tops don't line up between left and right.
(This also shows that your input boxes extend beyond the
actual formLineRight box, thus overlapping to the right of the
contentSection (at least in Mozilla for Mac)).

Then...just for fun, increase formLineRight width to something
like 70% and see how they are rendered...

This looks like a great opportunity for a table to me...

....cj

--
------------------------
-- Christopher J. White
--
-- chris @ (---)
-- grierwhite . com
------------------------

[Eric Bohlman]

Robert William Vesterman <bo*@vesterman.com> wrote in
news:67********************************@4ax.com:

http://www.vesterman.com/CSSProblem.html

It uses the style sheet:

http://www.vesterman.com/Style/Default.css

The page is valid XHTML1.1; the style sheet is valid CSS 2.

Please take a look at it in Mozilla and IE; the way it looks in IE is
the way that I would like it to look.

Is that with the input elements centered, and the labels on top of them and
indented a bit? If so, put "clear: both;" on .formLine, increase the width
assigned to .formLineRight (the width you had assigned was smaller than the
actual width; that and the lack of clear on .formLine were causing the form
to spill outside its div), add "display: block;" to both .formLineLeft and
..formLineRight, remove the "float: right;" from .formLineRight and replace
it with "margin: 0 auto;".