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! Link to comment https://forums.phpfreaks.com/topic/110477-silly-text-fields-overstepping-their-bounds-silly-i-say/ 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> Link to comment https://forums.phpfreaks.com/topic/110477-silly-text-fields-overstepping-their-bounds-silly-i-say/#findComment-566818 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.