 jhardman  3,406
Recognized Expert Specialist
People keep saying this is possible, but I'm not sure I see it. If I had used a table it would have been done a day ago, but without the table the labels and inputs don't line up. Everything I have tried will line up the inputs at some window sizes, but if I resize the window the next input pops over the the right, or goes up a line. Where is the alleged advantage of using strict css positioning?
Here's my form: - <html><head><title>Scholarship form</title>
-
<style>
-
-
label {
-
width:30%;
-
float:left;
-
text-align:right;
-
margin-right: 5px;
-
}
-
-
input, textarea {
-
float: none;
-
display: inline;
-
}
-
-
</style>
-
</head>
-
<body>
-
<h1>Scholarship form</h1>
-
<form>
-
<label for="applName">Name:</label><input type="text"
-
name="applName" ><br>
-
<label for="applAddress">Address:</label><textarea
-
name="applAddress" rows="2" cols="30"></textarea><br>
-
<label for="applPhone">Phone:</label><input
-
-
type="text" name="applPhone"><br>
-
<label for="applEmail">Email:</label><input
-
type="text" name="applEmail"><br>
-
<label for="canPay">Can you attend this conference
-
without the scholarship?</label><input type="text"
-
name="canPay" size="4"><br>
-
<label for="acceptPartial">Can you attend with a
-
partial scholarship?</label><input type="text"
-
name="acceptPartial" size="4"><br>
-
<label for="howWillBenefit">How will attending this
-
conference help you?
-
</label><textarea name="howWillBenefit" cols="35"
-
rows="4"></textarea><br>
-
<input type="submit" name="submit" value="Submit
-
Scholarship Application">
-
</form>
-
</body></html>
Jared
9 4900   danp129 323
Recognized Expert Contributor
Is this more like what you're wanting? - <html>
-
<head>
-
<title>Scholarship form</title>
-
<style type="text/css">
-
label
-
{
-
clear: left;
-
float: left;
-
width: 30%;
-
text-align: right;
-
margin-right: 5px;
-
}
-
-
input, textarea
-
{
-
float: left;
-
clear: right;
-
display: inline;
-
}
-
</style>
-
</head>
-
<body>
-
<h1>
-
Scholarship form</h1>
-
<form>
-
<label for="applName">
-
Name:</label><input type="text" name="applName">
-
<label for="applAddress">
-
Address:</label><textarea name="applAddress" rows="2" cols="30"></textarea>
-
<label for="applPhone">
-
Phone:</label><input type="text" name="applPhone">
-
<label for="applEmail">
-
Email:</label><input type="text" name="applEmail">
-
<label for="canPay">
-
Can you attend this conference without the scholarship?</label><input type="text"
-
name="canPay" size="4">
-
<label for="acceptPartial">
-
Can you attend with a partial scholarship?</label><input type="text" name="acceptPartial"
-
size="4">
-
<label for="howWillBenefit">
-
How will attending this conference help you?
-
</label>
-
<textarea name="howWillBenefit" cols="35" rows="4"></textarea>
-
<label>
-
</label>
-
<input id="submit" type="submit" name="submit" value="Submit
-
Scholarship Application">
-
</form>
-
</body>
-
</html>
jhardman 3,406
Recognized Expert Specialist
nope, didn't help. Notice the input where I have typed in the word "this" in the picture. 
this is the input for the question "Can you attend with a partial scholarship?" which is a properly formatted form label. The problem is more pronounced in internet explorer (on the left) but is still there in ff on the right. Depending on screen resolution the input does not line up with the label and this would be trivial to fix with a table.
Jared
can I make a suggestion here? I prefer not to use floats, because this usually results in complete strangeness. For forms I have been using the following format these day... -
<fieldset>
-
<legend>My Formname or section name</legend>
-
-
<div>
-
<label for="controlname">Hello</label>
-
<input type="text" id="controlname" />
-
-
<label for="controlname2">Hello</label>
-
<input type="text" id="controlname2" />
-
-
</div>
-
-
<div>
-
<label for="controlname3">Hello</label>
-
<input type="text" id="controlname3" />
-
-
<label for="controlname4">Hello</label>
-
<input type="text" id="controlname4" />
-
-
</div>
-
</fieldset>
with this structure, you can use the following CSS -
fieldset { border: ...; specify a width here etc }
-
fieldset.div {width: 1/2 the width you specified above; white-space: nowrap; display: inline-block;}
-
label[for] { width: 120px; display: inline-block; }
-
input[type="text"] { width: 200px; }
-
textarea { width: 198px; }
perfect placement... :)
Also, you can do some really clever positioning if you need to all relative to the label and textbox. You may want to also look into things like adjacent selectors.
I usually add a span inside my label, this can then be absolutely positioned, and then be used with jQuery for various tooltip effects.
danp129 323
Recognized Expert Contributor
Did you copy the entire code? Here's what it looks like on FF9 and IE9.
jhardman 3,406
Recognized Expert Specialist
Dan, it was totally broken in my IE9, copied exactly from your post. 
Jared
You will never get IE to attempt to perform like the other far more modern browsers without a doctype. Put this on your first line: danp129 323
Recognized Expert Contributor
Add the doctype like drhowarddrfine said, IE is probably using quirks mode.
danp129 323
Recognized Expert Contributor
lgm001,
Your rule "fieldset.d iv" doesn't do anything, it should be called "fieldset div" to select div elements below a fieldset element. When I make that change it breaks your intended layout.
Sorry ... typo.
I stand corrected.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Matthew Wells |
last post by:
I am trying to load a form (load Me) without the form becoming visible. If
I try me.hide or me.visible = false, they load the form and the form blinks
before becoming invisible. Is there a way to load the form without it
becoming visible at all until I say me.visible = true?
Thanks.
Matthew Wells
MWells@NumberCruncher.com
|
by: Max Quordlepleen |
last post by:
Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.
I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.
Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of...
|
by: Jeremy Clulow |
last post by:
One disadvantage of designing with CSS and without tables appears to
be that selecting specific block of text from a web page to copy and
paste, or in order for it to be read by a text-to-speech programme is
very difficult. My own website www.webswonder.co.uk is an example.
Does anyone have any suggestions as to how to overcome this please?
Thanks,
Jeremy
|
by: kaeli |
last post by:
I have had a little free time lately to revisit a problem I have with the 3
column layout plus a header and footer.
See this example:
http://glish.com/css/7.asp
There is a header and 3 columns. Pretend there's a footer at the bottom, too.
:)
Here are the issues I have been unable to solve without tables _somewhere_
|
by: Daphne Tregear |
last post by:
Is anyone able to improve on this solution, and enable me to do
without tables completely?
http://www.cs.man.ac.uk/~daf/i-p-c-s.org/faq/gallery_old.php
uses a table to lay out the thumbnails and their captions. This a)
uses a table, b) wastes space when the window is large and c) overlaps
the RHS div when the window is small.
I use the same approach for
| | |
by: effendi |
last post by:
Is is possible for me to place to images side by side one -one right
align and another left align on the same horizontal plane using CSS
without tables?
Thanks for any suggestion/advice.
|
by: Abhi |
last post by:
FYI:
This message is for the benefit of MS Access Community. I found that
this prblem has been encounterd by many but there is hardly any place
where a complete solution is posted. So I thought I should give back
to the community by posting our findings.
Thanks you all for all your help till now by posting problems and
their solutions.
~Abhijit
|
by: lotusny78 |
last post by:
Hi all,
I'm trying to lay out 3 text boxes with associated labels horizontally,
as in the following pseudocode:
<form>
TITLE
label1 label2
label3
edit1 edit2
edit3
|
by: Markus Ernst |
last post by:
Hello
This is a test example:
http://www.markusernst.ch/anthracite/
http://www.markusernst.ch/anthracite/living_divani.html
After googling and experimenting for several hours, I ended up doing
this demo with tables. The main problems are the vertical centering of
the info area, and of the text inside the squares.
|
by: emajka21 |
last post by:
Hello, and thank you in advance for trying to help me. I am trying to create an access 2000 form without using the wizard. It just doesn't seem like I can the level of complexity I want out of the wizard so I want to hand code the form. If this was any other language accessing an access form I know how to do it but I am not sure how to access the tables WITHIN the access database itself.
Here is what I would like the form to do.
On Load:...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| | |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
