ultrus Posted June 16, 2008 Share Posted June 16, 2008 Hello, I'm having difficulties getting text fields that are 100% wide, with padding and a border. It seems that the padding and border widths are added to the 100%, making the text field break out of where I want it visually. You can see a version of this in action here. How do I fix this? Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test 1</title> <style> body { margin: 0px; } .stretchField { width: 100%; border: #2D2C25 solid 1px; background-color: #FFFFFF; height: 18px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10pt; color: #000000; padding-left: 3px; padding-right: 3px; } .container { width: 200px; height: 200px; padding: 6px; background-color: #FF9900; } </style> </head> <body> <table> <tr> <td class="container"> <form action="" method="post"> <input name="textTest" type="text" value="Will it overstep?" class="stretchField" /> </form> </td> </tr> </table> </body> </html> Thanks for the assist! Quote Link to comment Share on other sites More sharing options...
ultrus Posted June 16, 2008 Author Share Posted June 16, 2008 I've come up with a solution on my own. Let me know if you think of anything better. I forget to try to separate cells with widths from cells with padding/borders. Here is something with a good appearance, but required an extra div to hold the text field as seen in this link: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test 1</title> <style> body { margin: 0px; } .stretchField { width: 100%; background-color: #FFFFFF; height: 18px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10pt; color: #000000; border: none; } .testDiv { padding-left: 3px; padding-right: 3px; background-color: #FFFFFF; border: #2D2C25 solid 1px; } .container { width: 200px; height: 200px; padding: 6px; background-color: #FF9900; } </style> </head> <body> <table> <tr> <td class="container"> <form action="" method="post"> <div class="testDiv"><input name="textTest" type="text" value="Will it overstep?" class="stretchField" /></div> </form> </td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.