469,626 Members | 1,043 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,626 developers. It's quick & easy.

Layout issues IE vs FireFox

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
Dec 28 '06 #1
8 5440
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?

Dec 28 '06 #2
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?

Dec 28 '06 #3
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

Dec 28 '06 #4
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

Dec 28 '06 #5
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.
Dec 28 '06 #6
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.

Dec 28 '06 #7
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
Dec 28 '06 #8
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".
Dec 28 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

49 posts views Thread by lime | last post: by
7 posts views Thread by Xavier Onassis | last post: by
3 posts views Thread by googlegroups | last post: by
3 posts views Thread by Spondishy | last post: by
2 posts views Thread by subrato | last post: by
4 posts views Thread by UKuser | last post: by
14 posts views Thread by varois83 | last post: by
10 posts views Thread by Ole Nielsby | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.