Layout issues IE vs FireFox

[dixzyt]

Hi

I wonder if anyone would be so kind as to help me with this issue that's
driving me nuts!

The webpage below displays correctly on IE & Opera but NOT on Firefox 2.0.
On Firefox the submit button is rendered overlaying the comments field. On
IE & Opera however, the submit button is rendered correctly - below the
comments field.

http://www.avui40.dsl.pipex.com/test.html

If u could point me to the FAQ for tis newsgroup I would be very grateful.

kind regards

dixzyt

[yb]

Hi,

Can't quite understand why you are using absolute positioning for all
the elements.

Why not just let them stay in the "flow" of the document?

[dixzyt]

I thought that using absolute positioning was the only way to make sure all
the text entry fields line up.
I am new to CSS and created this page using information I found here:

http://www.html.net/tutorials/CSS/
and here:
http://www.cvwdesign.com/contactformexample.html

thanks

dixzyt

I'll do some research on what exactly keeping them in the "flow" means

"yb" <ba*********@yahoo.cawrote in message
news:11********************@73g2000cwn.googlegroup s.com...

Hi,

Can't quite understand why you are using absolute positioning for all
the elements.

Why not just let them stay in the "flow" of the document?

[yb]

dixzyt wrote:

http://www.cvwdesign.com/contactformexample.html

ok, sorry my bad

now i see what you were trying to accomplish

a quick fix would be to use a larger top margin

[yb]

dixzyt wrote:

http://www.cvwdesign.com/contactformexample.html

ok, sorry my bad

now i see what you were trying to accomplish

a quick fix would be to use a larger top margin for the text area

[Ben C]

On 2006-12-28, dixzyt <wrote:

Hi

I wonder if anyone would be so kind as to help me with this issue that's
driving me nuts!

The webpage below displays correctly on IE & Opera but NOT on Firefox 2.0.
On Firefox the submit button is rendered overlaying the comments field. On
IE & Opera however, the submit button is rendered correctly - below the
comments field.

http://www.avui40.dsl.pipex.com/test.html

yb was right the first time. The problem is that you're using absolute
positioning, and leaving top for that button as "auto".

This means the browser is supposed to work out where the box would have
gone if it hadn't been absolutely positioned, but that's not well
defined, and the CSS 2.1 spec says the browser is free to make a guess
at this position.

You're going to get a few differences between browsers if you rely on
this, so it's only a suitable technique for things for which it doesn't
matter exactly where they are.

[yb]

This means the browser is supposed to work out where the box would have

gone if it hadn't been absolutely positioned, but that's not well
defined, and the CSS 2.1 spec says the browser is free to make a guess
at this position.

Also, when you absolutely positioned the text area, its taken "out of
the flow" so that the following submit button layout is not affectted
by the position of the textarea.

I see the problem you are having with the form is to get the text
inputs to align together.

Another possible solution is to relatively position the DIV elements
containing your INPUT elements, instead of the FORM. The LABEL
elements define content inside the DIV that affects the flow of
following elements.

Within each of these divs you could absolutely position the INPUT
element specifying both top and left position (preferably using em
units). The positioning would use the DIV container as a reference
point.

For the text area, perhaps modifying the layout so the the "Comment"
text has a BR (break) after and don't position the textarea might work
better.

The submit button afterwards will flow under the text area without
extra CSS for positioning.

[Bergamot]

dixzyt wrote:

I thought that using absolute positioning was the only way to make sure all
the text entry fields line up.

Nope.

I am new to CSS and created this page using information I found here:

http://www.html.net/tutorials/CSS/

Whoever wrote this doesn't seem to know any units except px. Couple that
with the overly simplified explanations of concepts like positioning and
you have a recipe for disaster - everything absolutely positioned at px
points on the page. :(

and here:
http://www.cvwdesign.com/contactformexample.html

This could have been done just as easily using floats, or even table
markup, since form fields are considered tabular data by a lot of
people, myself included.

I'll do some research on what exactly keeping them in the "flow" means

If you just let things fall where they naturally end up, that is keeping
them in the flow, a.k.a static positioning.

BTW, please don't top post. You'll get better results from this
newsgroup if you follow the accepted conventions. Posting a URL showing
your test page was a good first step. :)
http://allmyfaqs.net/faq.pl?How_to_post

--
Berg

[Ben C]

On 2006-12-28, yb <ba*********@yahoo.cawrote:

>This means the browser is supposed to work out where the box would have
gone if it hadn't been absolutely positioned, but that's not well
defined, and the CSS 2.1 spec says the browser is free to make a guess
at this position.

Also, when you absolutely positioned the text area, its taken "out of
the flow" so that the following submit button layout is not affectted
by the position of the textarea.

Yes and no. It is taken out of the flow, but its position is still
(though rather too vaguely) affected by the textarea because its
computed value for top is "a guess at what it would have been if it had
been in the flow".