|
Posted by dbasch on October 23, 2006, 7:29 pm
Please log in for more thread options
Hello all,
I am trying my best to create a three column form using CSS but am
having no luck. It looks fine in Firefox but is mangled in IE. Here is
my best attempt:
<style type="text/css">
body{
font-family: arial;
}
input[type="checkbox"] {
margin-left: 1em;
margin-right: 1em;
margin-bottom: .5em;
width: 5%;
float: left;
clear: left;
}
label {
text-align: left;
margin-right: 0.5em;
margin-bottom: .5em;
width: 40%;
float: left;
}
input[type="text"] {
float: left;
margin-bottom: .5em;
}
</style>
<form action="/cgi-admin/subscribe.pl" method="post">
<fieldset>
<legend>Renewals</legend>
<div>
<input type="checkbox" name="itemmembership-1yr" value="yes"
id="itemmembership-1yr">
<label for="itemmembership-1yr">Standard Membership</label>
<input type="text" name="amtmembership-1yr" value="99.00"
readonly>
</div>
<div>
<input type="checkbox" name="itemstudent-1yr" value="yes"
id="itemstudent-1yr">
<label for="itemstudent-1yr">Student Membership</label>
<input type="text" name="amtstudent-1yr" value="49.00"
readonly>
</div>
</fieldset>
<input type="submit" name="op" value="Enter Payment" />
</form>
Pretty simple as you can see.
Can anyone tell me how to get a proper three column css form layout
that works in IE and Firefox? Everything I can find on the internets is
for two column layouts.
Thanks!
Derek Basch
|
|
Posted by Lars Eighner on October 23, 2006, 11:39 pm
Please log in for more thread options
In our last episode,
talented dbasch broadcast on comp.infosystems.www.authoring.html:
> Can anyone tell me how to get a proper three column css form layout
> that works in IE and Firefox? Everything I can find on the internets is
> for two column layouts.
Check out "skidoo too"
Stuff still breaks in IE, but it is the usual stuff related to
spaces around LI, not the three column part. The basic idea is
that the central column has huge right and left margins and you
put the two other columns on the margins. It has the advantage
that the central column (which typically is the main the content)
comes first, so there aren't tons of navigation crap at the top
of the page as view by text browsers or robots (spiders).
--
Lars Eighner <http://larseighner.com/> <http://myspace.com/larseighner>
Nobody has ever, ever, EVER learned all of WordPerfect.
|
|
Posted by Jukka K. Korpela on October 24, 2006, 2:34 am
Please log in for more thread options
Scripsit dbasch:
> I am trying my best to create a three column form using CSS but am
> having no luck.
So why do you post here and not c.i.w.a.stylesheets?
Actually, your question _should_ have been "how do I mark up such-and-such a
form in HTML?" (to be solved before you consider the rendering problem), and
_then_ it would have belonged here. But you should have specified what
such-and-such is and posted the _URL_ of the best effort so far.
> Here is my best attempt:
No, it's just a fragment. Post the URL.
> input[type="checkbox"] {
You won't get much of a browser coverage with that.
> <input type="text" name="amtmembership-1yr" value="99.00"
> readonly>
So what happens when I copy your page (adding a suitable <base href...> tag)
and edit the above element, changing "99.00" to "0.00" for example, and
submit the order? The point is that you should make the prices visible on
the page as normal text (not fields) and map the order type to a price _on
the server_. (And, of course, the prices should appear with currency unit
names, symbols, or abbreviations, such as "$". After all, this _is_ the
World Wide Web.)
> Pretty simple as you can see.
Not really. Are you using checkboxes, instead of radio buttons,
intentionally to make some people submit duplicate subscriptions (paying
both normal and student price), or didn't you just know about radio buttons?
> Can anyone tell me how to get a proper three column css form layout
> that works in IE and Firefox?
Your form content looks very much like a simple table, with controls (<input
...>) in one column, corresponding labels in another column, and price
information for the choice in the third column. If you use a <table> element
for it, the layout problem almost solves itself in a puff of logic, though
you will have some minor CSS issues to deal with in order to make the
appearance optimal.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
|
| Similar Threads | Posted | | Three column layout, middle column clear:both; affects other two columns;no tables | March 9, 2007, 11:31 pm |
| Implied width of implied center column in 3 column table | June 30, 2008, 4:23 am |
| Forms - howto use return for submitting in Forms? | April 6, 2005, 4:08 pm |
| Manipulating a two-column table? | March 8, 2006, 12:09 pm |
| texts in same column but different size | April 3, 2008, 8:27 am |
| Hidden column in HTML page | October 4, 2004, 7:13 am |
| multi-column html form | July 18, 2005, 7:42 am |
| freezing column headers with dropdowns | December 15, 2005, 5:10 pm |
| 3 column css layout with the middle fixed | February 17, 2006, 4:32 pm |
| Changing Cellspacing in a single column only | March 27, 2007, 12:13 pm |
|
XML Sitemap