开发者

How do I align input field and submit button (also differences between: IE, FFox, Chrome)?

开发者 https://www.devze.com 2023-02-12 06:13 出处:网络
I am having problems styling form fields with CSS. As y开发者_如何学Goou can see below I am trying to get an input field and then to its right the submit button. However for some reason I can\'t get t

I am having problems styling form fields with CSS. As y开发者_如何学Goou can see below I am trying to get an input field and then to its right the submit button. However for some reason I can't get them to align correctly on any browser, nor can I get them to at least look the same in them and finally everything goes bad when I zoom as well!

I have tried the "line-height:normal !important;" solution, but that doesn't seem to work either...

What am I doing wrong?

IE7 (xp)

How do I align input field and submit button (also differences between: IE, FFox, Chrome)?

FFox (linux)

How do I align input field and submit button (also differences between: IE, FFox, Chrome)?

Chrome (linux)

How do I align input field and submit button (also differences between: IE, FFox, Chrome)?

CSS (nothing for subscribe_form):

#form_box {
    position: relative;
    height: 35px;
    top: 7px;
    left: 20px; 
}

#subscribe_email {
    border: solid 1px #CCC;
    height: 24px;
    width: 250px;
    font-size: 15px;
    color: #999;
    padding-left: 5px;
}

#subscribe_submit {
    position: relative;
    border: solid 1px #CCC;
    height: 25px;
    width: 115px;
    color: white;
}

HTML:

        <div id="box2" class="tbox">
            <div id="form_box">
            <form id="subscribe_form" action="subscribe" method="post">
                Sign Up:
                <input class="tbox" id="subscribe_email" type="text" name="email" value="email address" />
                <input class="tbox" id="subscribe_submit" type="submit" value="Subscribe" />
            </form>
            </div>
        </div>


Here is what works for me in FF, IE8 and Chrome on XP

#subscribe_email {
    border: solid 1px #CCC;
    height: 21px;
    width: 250px;
    font-size: 15px;
    color: #999;
    padding-left: 5px;
    vertical-align: bottom
}

#subscribe_submit {
    border: solid 1px #CCC;
    height: 25px;
    width: 115px;
    color: white;
}

I removed CSS on the #form_box div, set vertical-align:bottom and tweaked the height on text box.


you should try floating them both left, that way they will position themselves.


before aplying any css make all margin and padding zero by default all browser as thr own margin and padding by making it zero and then applying ur style it affects eventually

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号