allign input fields correctly in every browser

Question

Violet_82 89 Posting Whiz in Training

11 Years Ago

Hi all, I am trying desperately to align correctly a set of 2 adjacent input boxes, but alas, this is turing into a nightmare and I wonder what guys you think it might be the best approach. Here's the code:

<html>
    <head>
        <title>test</title>
        <style>
        .theForm{
            background-color:#f4f4f4;
            margin-top:14px;
            padding:25px 0 40px 25px;
            font-size: 0.875em;/* 14/16*/
            color: #333333;
        }
        .theForm #email, .theForm #residence {
            margin:0 7% 14px 0; /*percentage is 42/600 */
            width:52.33333333333333%; /* 314/600*/
            float:right;
        }
        .theForm #theMonth {
            width:14.5%; /* 87/600*/
            margin:0 12px 14px 13%; /*percentage is 93/600 */   
        }
        .theForm #theYear{
            width:14.5%; /* 87/600*/    
            margin:0 10px 14px 0; /*percentage is 18/600 */
        }

        .theForm a#mandatory{
            font-size:0.75em;/*12/16*/
        }
        .theForm select option{
            color: #333333;
        }
        .theForm #theDay{
            width:14.5%; /* 87/600*/
            margin:0 12px 14px 18.83333333333333%; /*percentage is 93/600 */    
        }
        .theForm #specificDay{
            width:14.5%; /* 87/600*/    
            margin:0 10px 14px 0; /*percentage is 18/600 */
        }
        .clear{clear:both;}
        #main{
            width:600px;
            margin:0 auto;
        }
        /*REGISTER FORM*/
        </style>
    </head>
    <body>
        <div id="main">
            <div class="theForm">
                <form>
                    Email address:<input type="text" name="email" id="email"><br>
                    <div class="clear"></div>
                    theMonth / theYear of birth:
                        <select name="theMonth" id="theMonth">
                            <option value="theMonth"></option>
                            <option value="January"></option>
                            <option value="February"></option>
                            <option value="March"></option>
                            <option value="April"></option>
                            <option value="May"></option>
                            <option value="June"></option>
                            <option value="July"></option>
                            <option value="August"></option>
                            <option value="September"></option>
                            <option value="October"></option>
                            <option value="November"></option>
                            <option value="December"></option>
                        </select>
                        <select name="theYear" id="theYear">
                            <option value="theYear"></option>
                            <option value="1940"></option>
                            <option value="1941"></option>
                            <option value="1942"></option>
                            <option value="1943"></option>
                            <option value="1944"></option>
                            <option value="1945"></option>
                            <option value="1946"></option>
                            <option value="1947"></option>
                            <option value="1948"></option>
                            <option value="1949"></option>
                            <option value="1950"></option>
                            <option value="1951"></option>
                        </select>
                        <a href="#" id="mandatory">Why this?</a>
                        <div class="clear"></div>
                        theDay of resignation:
                        <select name="theDay" id="theDay">
                            <option value="theMonth"></option>
                            <option value="January"></option>
                            <option value="February"></option>
                            <option value="March"></option>
                            <option value="April"></option>
                            <option value="May"></option>
                            <option value="June"></option>
                            <option value="July"></option>
                            <option value="August"></option>
                            <option value="September"></option>
                            <option value="October"></option>
                            <option value="November"></option>
                            <option value="December"></option>
                        </select>
                        <select name="theMonth" id="specificDay">
                            <option value="theYear"></option>
                            <option value="1940"></option>
                            <option value="1941"></option>
                            <option value="1942"></option>
                            <option value="1943"></option>
                            <option value="1944"></option>
                            <option value="1945"></option>
                            <option value="1946"></option>
                            <option value="1947"></option>
                            <option value="1948"></option>
                            <option value="1949"></option>
                            <option value="1950"></option>
                            <option value="1951"></option>
                        </select>
                        <a href="#" id="mandatory">Why this?</a>                          
                        <div class="clear"></div>                         
                        Country of residence:<input type="text" name="country" id="residence"><br>
                        <div class="clear"></div>

                    </form>
                </div>
            </div>
    </body>
</html>

The offending boxes are the theMonth / theYear of birth: and theDay of resignation: (by the way sorry for the internal style sheet but I suppose it saves time!) and they should be aligned with the email address and the country of residence. The thing is if I get it right in a browser then obviously another browser will add some pixels here and there throwing off the alignements. You might see some unsightly percentages there, those are basically assuming themain container being 600px. The problem is I will have to be able to align them using percentage because the design is meant to be responsive.
One option I thought about was to wrap the input fields in their own div - one each I suppose - and try with that, but I realized that, since I need to use percentage, I will have the same problem.
Any advice much appreciated. Also, on a side note, why are my options not visible in the html?
thanks
I need

web-design

2 Contributors
4 Replies
104 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by Violet_82

AleMonteiro 238 Can I pick my title?

11 Years Ago

Hi Violet. I'd use more like this:

<html>
    <head>
        <title>test</title>
        <style>
        .theForm{
            background-color:#f4f4f4;
            margin-top:14px;
            padding:25px 0 40px 25px;
            font-size: 0.875em;/* 14/16*/
            color: #333333;
        }
        .theForm #email, .theForm #residence {
            width:52.33333333333333%; /* 314/600*/
        }
        .theForm #theMonth {
            width:14.5%; /* 87/600*/
        }
        .theForm #theYear{
            width:14.5%; /* 87/600*/    
        }

        .theForm a#mandatory{
            font-size:0.75em;/*12/16*/
        }
        .theForm select option{
            color: #333333;
        }
        .theForm #theDay{
            width:14.5%; /* 87/600*/
        }
        .theForm #specificDay{
            width:14.5%; /* 87/600*/    
        }
        .clear{clear:both;}
        #main{
            width:600px;
            margin:0 auto;
        }

        .inline
        {
            position: relative;
            display: -moz-inline-stack;
            display: inline-block;
            zoom: 1;
            vertical-align: top;

            *display: inline;
        }
        .label {
            width: 200px;
        }
        .form-row {
            margin-bottom: 10px;
        }
        /*REGISTER FORM*/
        </style>
    </head>
    <body>
        <div id="main">
            <div class="theForm">
                <form>

                    <div class="form-row">
                        <span class="inline label">Email address:</span><input type="text" name="email" id="email">
                    </div>

                    <div class="form-row">
                        <span class="inline label">theMonth / theYear of birth:</span>
                        <select name="theMonth" id="theMonth">
                            <option value="theMonth"></option>
                            <option value="January"></option>
                            <option value="February"></option>
                            <option value="March"></option>
                            <option value="April"></option>
                            <option value="May"></option>
                            <option value="June"></option>
                            <option value="July"></option>
                            <option value="August"></option>
                            <option value="September"></option>
                            <option value="October"></option>
                            <option value="November"></option>
                            <option value="December"></option>
                        </select>
                        <select name="theYear" id="theYear">
                            <option value="theYear"></option>
                            <option value="1940"></option>
                            <option value="1941"></option>
                            <option value="1942"></option>
                            <option value="1943"></option>
                            <option value="1944"></option>
                            <option value="1945"></option>
                            <option value="1946"></option>
                            <option value="1947"></option>
                            <option value="1948"></option>
                            <option value="1949"></option>
                            <option value="1950"></option>
                            <option value="1951"></option>
                        </select>
                        <a href="#" id="mandatory">Why this?</a>
                    </div>

                    <div class="form-row">
                        <span class="inline label">theDay of resignation:</span>
                        <select name="theDay" id="theDay">
                            <option value="theMonth"></option>
                            <option value="January"></option>
                            <option value="February"></option>
                            <option value="March"></option>
                            <option value="April"></option>
                            <option value="May"></option>
                            <option value="June"></option>
                            <option value="July"></option>
                            <option value="August"></option>
                            <option value="September"></option>
                            <option value="October"></option>
                            <option value="November"></option>
                            <option value="December"></option>
                        </select>
                        <select name="theMonth" id="specificDay">
                            <option value="theYear"></option>
                            <option value="1940"></option>
                            <option value="1941"></option>
                            <option value="1942"></option>
                            <option value="1943"></option>
                            <option value="1944"></option>
                            <option value="1945"></option>
                            <option value="1946"></option>
                            <option value="1947"></option>
                            <option value="1948"></option>
                            <option value="1949"></option>
                            <option value="1950"></option>
                            <option value="1951"></option>
                        </select>
                        <a href="#" id="mandatory">Why this?</a>                          
                    </div>

                    <div class="form-row">                   
                        <span class="inline label">Country of residence:</span><input type="text" name="country" id="residence"><br>
                    </div>

                    </form>
                </div>
            </div>
    </body>
</html>

Tested on IE, FF, Chrome and Opera.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2013-02-18T21:58:52+00:00

Thanks, so basically to make sure that everything is aligned, I have to have a div for each row

AleMonteiro 238 Can I pick my title? · Answer 2 · 2013-02-18T22:20:15+00:00

To align horizontally you just need the span(with the label class).
I used an div for each row to align vertically.

I suppose you could work only with margins, but as you are seeing for your self, the headache is bigger ^^

Violet_82 89 Posting Whiz in Training · Answer 3 · 2013-02-20T18:47:39+00:00

thanks, yes it is a big headache really. It is a really good idea to wrap everything in a div, unfortunately I can't use spans with classes, because the website I am working on will be managed through a CMS which apparently won't allow the addition of classes within spans (yes I know...!) but I think I can get it to work with divs and margins
thanks