10 replies [Last post]
seefresh
seefresh's picture
Offline
newbie
NY
Last seen: 12 years 9 weeks ago
NY
Joined: 2008-01-30
Posts: 5
Points: 0

Hi folks, first post here, but I suspect there will be many more. I'm a beginner with CSS. Long time web developer, but finally trying to migrate away from using so many dang tables for everything. I'm trying to build a form and I want the input boxes to line up on the left. I did some research and it seemed like a good way to do it was with a UL and 2 spans in each LI. Here is what I have so far:

Style sheet:

li.formFields
{
width:75em;
border-bottom: 1px dashed #ccc;
padding: 3px 3px 3px 3px;
}
.inputText
{
display: inline;
width: 30em;
text-align: left;
border-right: 1px dotted #ddd;
padding: 3px 3px 3px 3px;
}
.inputField {
display: inline;
width: 30em;
text-align: left;
margin-right: 1em;
padding: 3px 3px 3px 3px;
}

And then my layout code is:



  • Recipe Name:





  • Original Gravity:




Thanksf or any suggestions!

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 1 week ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Did you achieve the desired

Did you achieve the desired result? It looks like a good method, but I've never really done any form styling, so I can't say if there is a better alternative.

seefresh
seefresh's picture
Offline
newbie
NY
Last seen: 12 years 9 weeks ago
NY
Joined: 2008-01-30
Posts: 5
Points: 0

No, the code I put up does

No, the code I put up does not work and I can't figure out why for the life of me. The width sizing is not working for some reason. Does width not work with span? Does it not work when inside a div? Really mind boggling, it seems like it should work fine.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 1 week ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Width won't work because

Width won't work because it's set to inline. Spans are, by default, inline, so that's unnecessary at this point. But, to solve the problem, you will need to use floats. This will allow you to achieve having blocked displays on the same line with one another. Be sure to read up on how to clear your floats too.

seefresh
seefresh's picture
Offline
newbie
NY
Last seen: 12 years 9 weeks ago
NY
Joined: 2008-01-30
Posts: 5
Points: 0

Woohoo!

Figured out for those who care. I simply added:

display:-moz-inline-block; display:-moz-inline-box; display:inline-block;

this works in safari, IE and firefox!!!!!!!

wooot! Sometimes just writing it down (posting to a forum) helps me think it through better. Thanks for being here for me lol.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 1 week ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Hmm, I thought IE botched

Hmm, I thought IE botched inline-blocks greatly. My mistake, good catch.

seefresh
seefresh's picture
Offline
newbie
NY
Last seen: 12 years 9 weeks ago
NY
Joined: 2008-01-30
Posts: 5
Points: 0

such a noob

I'm such a noob at css that I was doing everything I could to figure it out. I had no idea what inline meant or float, I'd seen the words around before though. One of google searches like "span width css" or something showed a page where they were talking about it had to be inline, so that's how I got to the code I had. I decided to start searching display inline and found out exactly what it means and then found some cool sites that had been playing around with the block-inline function and cross browser functionality.

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 35 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

I know this is solved, I'm

I know this is solved, I'm just adding a suggestion...
I found a good way to lay out forms is like this (it simplifies your code a lot):

Recipe Name:
Original Gravity:

And then label {float: left; width: 10em;}

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 1 week ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Don't you also need to

Don't you also need to include the name attribute then on the input tag - just for older support?

seefresh
seefresh's picture
Offline
newbie
NY
Last seen: 12 years 9 weeks ago
NY
Joined: 2008-01-30
Posts: 5
Points: 0

The form I am doing is

The form I am doing is completely submitted by ajax, so I only needed the ID tags.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 1 week ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I thought I remembered

I thought I remembered reading that labels don't function in older browsers without the name attribute on the input tag, that's all. Generally I don't care about such older browsers, but it seemed like a super simple fix.