CSS and Form Element Positioning Issues

  • Thread starter Thread starter Matrixhasu77
  • 5 comments
  • 491 views
Matrixhasu77

Matrixhasu77

Messages
2,491
Ok, so here is my problem...

I'm attempting to build a form and position all the elements via CSS. However, I'm having trouble because I cannot get an element to line up with its label on a single line because it wants to wrap to the next line in Internet Explorer (Firefox is fine). This only occurs after I have positioned a form element and its label after a preceding label and form element all on the same line. Any ideas on how to fix this? Attached are what the form should look like in Firefox and what it looks like in IE.

Here is the page (Far from working) I am trying to work on: Form
And the CSS: CSS

I originally got the idea from an ALA article. I'm not sure its even really going to work. I kind of want to see if I can lay out the form without having to resort to using a table to position several form elements horizontally. This is my main problem.

EDIT: Apparently there's a horizontal scrollbar in IE too. Something's screwy with the CSS. Fixed it... it was a percentage problem with my width property and a float issue. If anyone can think of a better way to do this, by all means post it.
 

Attachments

  • firefoxform.jpg
    firefoxform.jpg
    5.8 KB · Views: 11
  • IEform.jpg
    IEform.jpg
    6.9 KB · Views: 7
Instead of using floats (which are always buggy), try using display: inline.

BTW, don't use <span class="label">… there's an actual <label> element in existence. ;)
 
Sage
BTW, don't use <span class="label">… there's an actual <label> element in existence. ;)
Click to expand...

Well, I guess I learned something new today... I didn't know that. I had always wondered about that. Why didn't my web development class teach that?

I have to agree with you on floats... they're such a pain.

The only reason I have the floats is so that all the form elements are lined up vertically. Any ideas?
 
Matrixhasu77
The only reason I have the floats is so that all the form elements are lined up vertically. Any ideas?
Click to expand...
Well, that's a bit tricky. In that case, I'd probably reassign the <label> and <input> elements as display: block, set a specific height and width for them, then use negative positioning (e.g.: top: -10px) to slide the input boxes upward, and assign it a left value to keep it from blocking the label. So, something like:

Code: 
* {
     margin: 0;
     padding: 0;
}

div.row {
     height: 30px;
}

label {
     display: block;
     height: 30px;
     width: 40px;
}

input {
     display: block;
     position: relative;
     top: -30px;
     left: 50px;
     height: 30px;
     width: 60px;
}

BTW, don't be too reliant on that code… I just quickly typed that up, and haven't tested it or anything.
 
Sage
Well, that's a bit tricky. In that case, I'd probably reassign the <label> and <input> elements as display: block, set a specific height and width for them, then use negative positioning (e.g.: top: -10px) to slide the input boxes upward, and assign it a left value to keep it from blocking the label. So, something like:

Code: 
* {
     margin: 0;
     padding: 0;
}

div.row {
     height: 30px;
}

label {
     display: block;
     height: 30px;
     width: 40px;
}

input {
     display: block;
     position: relative;
     top: -30px;
     left: 50px;
     height: 30px;
     width: 60px;
}

BTW, don't be too reliant on that code… I just quickly typed that up, and haven't tested it or anything.
Click to expand...

I haven't really tried out this code (without tweaking it) to what I've written but I can tell you that it does produce some funky results. I've uploaded the completed form and CSS to my webspace(same links as above). I'm sure theres a way to improve/reduce the bloated CSS code somehow. It looks fine in IE6 now, but looks horrid in Firefox 1.0. I'll have to tweak it some more.
 
[edit]: Check your PMs in a minute… the code was too much for vB to handle.
 

Latest Posts

Back