6 Replies Latest reply on Jun 28, 2011 3:46 PM by MurraySummers

    Odd alignment in form

    webnewbie10 Level 1

      I inherited some css from the person who worked on this file previously.

      So far, I've taken what used to be a very complicated looking form, and simplified it. I'm close to being done, but can't seem to make the phrase "Last Name" line up with the other labels.

       

      NOTE: It does line up in Safari. But does NOT line up in Firefox.

       

      I'm guessing it has something to do with either widths, margins or padding. I've played around with all of these but can't seem to find the right combo that makes it all line up in Firefox. Here is the test file:

       

      http://www.jamison-design.com/test/abotests/ProfileTest.php

       

      I appreciate your help in spotting the problem! I'm currently learning css, but have a long way to go... so it would help if you could respond in as simple terms as possible. :-)

       

      THANKS!!! -- Wn10

        • 1. Re: Odd alignment in form
          MurraySummers Level 8

          Just so you'll know, there is no form on that page, nor are there text input fields.  So that would be the first reason you are having an alignment problem.

           

          Normally those kinds of things are done in an ordered list, not the way you have done them.

           

          Anyhow, to make things align, add "clear:both" to the rule for "label" and you'll be set.

          • 2. Re: Odd alignment in form
            Nancy OShea Adobe Community Professional & MVP

            Your form isn't a form.  It contains no HTML <form> or <input> tags.

            Start over:

            http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

             

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists 
            http://alt-web.com/
            http://twitter.com/altweb

            • 3. Re: Odd alignment in form
              webnewbie10 Level 1

              Thanks! It worked. :-) (Abd thanks for the super-quick response!!!

               

              And yes. I'm sorry. I had the wrong terminology. That specific code brings a result after they have filled out a form... I just copied a little piece from a larger group of pages...

               

              Now it is all properly aligned, with their responses (name, email, etc...) next to the labels. BUT I'm hoping you can explain why "clear:both;" worked. I thought "Clear" made it so nothing could show up to the left or right of an item. But when I added clear:both, now the person's last name  shows up next to "Last Name" label, as it should.

               

              I obviously don't understand what "clear" means... Would you mind giving me a sense of why this worked?

               

              Thanks again!!!! I had been futzing with it all morning trying to get it to work.

              • 4. Re: Odd alignment in form
                MurraySummers Level 8

                The "clear" style clears any current floats.  Your problem was the existing float:right on the text box was affecting the subsequent label.  This layout is indeed an odd way to do things, honestly.  I'd do them like this -

                 

                <ol>

                <li><span class="label">Label Stuff</span><span class="input">blah</span></li>

                 

                <li><span class="label">Label Stuff</span><span class="input">blah</span></li>

                <li><span class="label">Label Stuff</span><span class="input">blah</span></li>

                <li><span class="label">Label Stuff</span><span class="input">blah</span></li>

                <li><span class="label">Label Stuff</span><span class="input">blah</span></li>

                </ol>
                Then you could have -
                ol {
                     list-style-type:none;
                }
                span.label {
                     display:block;
                     float:left;
                     margin-right:10px;
                     padding-right:5px;
                     border-right:1px solid #CCC;
                }
                span.input {
                     display:block;
                     float:left;
                }
                li {
                     overflow:hidden;
                     width:400px;
                }

                 

                • 5. Re: Odd alignment in form
                  webnewbie10 Level 1

                  Thanks for your input. Another person originally set up that code. I guess I figured since it was working, why fix it.

                  But if it would be better to set up the form result (I don't know what else to call it) as a list, I'll try that.

                   

                  My only concern is that it works with arrays, and can grab the info via php from the database. But if a list can do that just as easily, then I'll give it a go. (Sorry again if I don't quite have the terminology right...)

                   

                  Thanks again for your help and interest. (You do have me a bit worried that the site I inherited is a mess... :-( But better to know now, and slowly get it into shape! (And learn some things along the way ;-)

                   

                  Thanks again! I really appreciate your time.  -- wn10

                  • 6. Re: Odd alignment in form
                    MurraySummers Level 8

                    You can do it any way you want, really.  And if your way is working satisfactorily, I'd just leave it.  But my example code was provided as a 'teaching moment'.  When you do this with a real form, you can work with the legitimate "<label>" and "<input>" tags instead of the fakey <span> tags that I have used in my example.

                     

                    When you're ready for that, just come back to the forum - someone will help you.