 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / December 2006Layout 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 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? 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 > 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? > 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 > 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 > 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  SignatureBerg > Hi > [quoted text clipped - 7 lines] > > 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. > 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. >> 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 [quoted text clipped - 4 lines] > 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". |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.