Form cross browser help. (IE6 & 7)

HTML & CSS
1

Hey Guys,

Need some IE6 and 7 cross browser issues. I have a form that looks fine in safari and Firefox but the form field input area is displaying text aligned towards the top of the field.

http://revolveclothing.com/html/b/3.0/browser_testing/myaccount_pages/01account_settings.html

Help is greatly appreciated.

2

Thanks for the help guys. It worked.

3

Having a problem with ie8.

http://revolveclothing.com/html/b/3.0/browser_testing/myaccount_pages/01account_settings.html

In ie8

.form_right

is shifting underneath

.form_left

for some reason only in ie8. Anyone know how I can fix this.

4

As Stomme said try this:


.form_field {
    height: 25px;
    width: 215px;
    background: black;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
    border: 1px solid #373737;
    color: #7f7f7f;
    float: right;
  [B]  line-height:25px[/B]
}
5

Hi,

The starting form tag is in the wrong place and there is no ending tag so the html is corrupt.

It should be like this I guess:


<div id="left_txt_2">
    <div id="form_1">
       [B] <form name="signup" id="signup" method="post" action="#">[/B]
            <div class="form_left"> <strong>Login Information</strong> &nbsp;&nbsp;&nbsp;Forgot your password? <a href="#">Click here</a> <br />
                <br />
                <table>
                    <tr>
                        <td><label for="city">Current password </label></td>
                        <td><input class="form_field" type="text" name="city" id="city" tabindex="3" /></td>
                    </tr>
                    <tr>
                        <td><label for="city">New password </label></td>
                        <td><input class="form_field" type="text" name="city" id="city" value="(optional)" tabindex="3" /></td>
                    </tr>
                    <tr>
                        <td><label for="city">Verify password </label></td>
                        <td><input class="form_field" type="text" name="city" id="city" value="(optional)" tabindex="3" /></td>
                    </tr>
                </table>
            </div>
            <div class="form_right_1"> <strong>Email Preferences</strong> <br />
                <br />
                <label>
                <input name="newsletter" value="" class="checkbox" type="checkbox" />
                &nbsp;Sales &amp; Coupons</label>
                <br />
                <label>
                <input name="newsletter" value="" class="checkbox" type="checkbox" />
                &nbsp;Special Events &amp; Features</label>
                <br />
                <label>
                <input name="newsletter" value="" class="checkbox" type="checkbox" />
                &nbsp;Women&#8217;s New Arrivals</label>
                <br />
                <label>
                <input name="newsletter" value="" class="checkbox" type="checkbox" />
                &nbsp;Men&#8217;s New Arrivals</label>
            </div>
       [B] </form>[/B]
    </div>
</div>
<div id="left_txt_3"> etc......

The form element must be correctly nested just like any other element or all best are off :slight_smile:

6

Here is a screen shot of the problem. Tanks you for your suggestions on the form code, someone will be taking care of the back end once I hand it off.

Notice how the text is displaying towards the top of the field.

7

Ah, but you said IE6/7.

My guess is that, you’ve set the font-size of 12px, but no explicit line-height, just a height. Maybe different browsers are using different default line-heights? So setting on to either equal to or slightly less than the height set on the input may vertically center the text in all browsers.

Or, see if vertical-align: middle works, setting it on the input. The text inside is inline, so it seems worth a shot. I tend to use line-height myself when I have large inputs. The text can never wrap, so that potential issue with line-height can never occur.

8

I just took a look in IE6 and 7 and they looked the same as my FF except IE showed some arrows… if those were going to be dropdowns or something…?

But I can comment on some other code if you want : ) Maybe post a screenshot of what you’re seeing because mine I think are looking fine. Or did you fix it?

Your search form has a fieldset. Just a note: the XHTML specs seem to have no reason to deviate from the HTML4 specs as far as requiring a legend (so, technically your search form is legal without a legend), and since the reason for legends being required with fieldsets in HTML4 were a good enough idea, many consider it an oversight, and so keep the legends (and so because of this, little forms like search, I use some other block like div).

The main form on the page however does have actual errors. Multiple inputs have the same id and multiple for’s have the same attribute. Also multiple elements have the same tabindex. Tabindex is kind of an evil when it screws with keyboarding (your form is pretty straightforward and people would tab in the correct order naturally, so tabindeces are doing only harm there). When I tab through the form, I’m unable to fill in any card details, and when it gets near Telephone on one column, it skips to the next column, then finally takes me back to the first col telephone, then the second… when multiple things have the same tabindex, I do not know that all browsers will act the same, since the idea is that only one thing has the tabindex of 1 on the page, only one thing has the tabindex of 2, and so on.

Just so you know, anyone who cannot load the images on that page for whatever reason, cannot use the menu. The Gilder-Levin method could cover images on and off both.