July 7, 201016 yr Hey, here's my problem: Opera [how it's supposed to look] Firefox IE I know there's a lot of confusion about things not lining up on web development forums so sorry if this is a repost but i couldn't find it anywhere. Bascically does anyone know how to get a form looking the same in these different browsers, I understand it'll be hard to get them exact, but i atleast want the length to be closer than they are. It's not so much the submit button, as that's probably a div problem, but the length of the input form does vary from browser to browser. Thanks for any help.
July 7, 201016 yr Have you applied css to the form to size and position it correctly? As long as you have defined everything you need to this way then there is no reason it shouldn't render the same in every browser.
July 7, 201016 yr Author .texta { font-size: 10px; background-color: #CCCCCC; border: 1px solid #666666; } .submit{ font-size: 10px; background-color: #CCCCCC; border: 1px solid #666666; } #apDiv1 { position:absolute; left:689px; top:-31px; width:253px; height:23px; z-index:1; } <div id="apDiv1"> <input name="textfield" type="text" class="texta" size="30" /> <input type="submit" value="Submit" class="submit" /> </div> This is the css i'm using, the div is positioning the form, and you can see i've tried to set the size and things, but there's still a bit of a difference between browsers, any idea?
July 7, 201016 yr Set the width of the input with css .texta { font-size: 10px; background-color: #CCCCCC; border: 1px solid #666666; width:150px; }
July 7, 201016 yr Just tried the code....well with left 100px; and top 31px; and could see no difference between IE8, Chrome and Firefox. Well the only difference being that in Chrome the Submit box is smaller. The spacing looks the same to me and not wildly different like your images. Just in case it makes any difference my DOCTYP is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
July 7, 201016 yr Author Set the width of the input with css .texta { font-size: 10px; background-color: #CCCCCC; border: 1px solid #666666; width:150px; } Thanks a lot worked a treat @zed Yeah, the image was taken when I had some crazy divs going on, that spacing has been fixed just by not splitting the button and input field into different divs. thanks alot guys, worked great, as usual!
Create an account or sign in to comment