Jump to content
jdp2000

Dimensions of text field vs div

Recommended Posts

Hi,I have a problem trying to get a form text field to match text in a div. It appears to be a problem in Safari and Firefox on mac but not on IE7<html> <body> <form> <input style="margin: 0px; padding: 0px; height: 30px; width: 300px; border: 1px solid grey;" type="text" value="some text"/> <div style="margin: 0px; padding: 0px; height: 30px; width: 300px; border: 1px solid grey;">some text</div> </form> </body></html>The height and width of the form field are a couple of pixels more than the div.Any help appreciated,Thanks,JD

Share this post


Link to post
Share on other sites

Add a DTD to your page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Share this post


Link to post
Share on other sites

I'm able to get the <input> element to display right all browsers except Internet Explorer with this code:

<input type="text" style="border: 1px solid #999; width: 300px;"><div style="width: 300px; border: 1px solid #999;">Some text</div>

Share this post


Link to post
Share on other sites
I'm able to get the <input> element to display right all browsers except Internet Explorer with this code:
<input type="text" style="border: 1px solid #999; width: 300px;"><div style="width: 300px; border: 1px solid #999;">Some text</div>

Thanks, I have it working now. The DocType did the trick. I also had the problem where IE stopped showing the border on the div but I changed the combined form to separate values like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> </head> <body> <form action=""> <fieldset> <input style="margin: 0px; padding: 0px; height: 30px; width: 300px; border-style: solid; border-width: 1px;" type="text" value="some text"/> <div style="margin: 0px; padding: 0px; height: 30px; width: 300px; border-style: solid; border-width: 1px;">some text</div> </fieldset> </form> </body></html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...