By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Problems with CSS in Mozilla

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
>>>>> "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
------------------------
Jul 20 '05 #2

P: n/a
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;".
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.