Textbox 100% Width Problem ...

**mdumka** · Sep 18, 2007 12:51

Hello,

First off my problem is in Mozilla Based Browsers and not IE ...

I have a container that has a textbox in it. I have a style for this textbox becuase I want it to be liquid for my forms and have multiple widths with out having to code each time.

The problem is that the textbox overflows the container and I have no Idea what to do ...

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>Untitled Document</title>
<style>
.textbox {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:.3em;
	border:1px solid #CCCCCC;
	color:#5A80B5;
	font-size:1em;
	width:100&#37;;
}
</style>
</head>

<body>
<div style="width:50%; border:1px solid #FF0000; padding:5px;">
<input class="textbox" />
</div>
</body>
</html>

Thanks for the help

Mike

**Dan Schulz** · Sep 18, 2007 13:02

Inputs are inline elements, so you need to set their display to block.

Though in your case a TEXTAREA element might be the better choice.

**mdumka** · Sep 18, 2007 13:06

Hi Dan ... added in block and no change ...

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>Untitled Document</title>
<style>
.textbox {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:.3em;
	border:1px solid #CCCCCC;
	color:#5A80B5;
	font-size:1em;
	width:100&#37;;
	display:block;
}
</style>
</head>

<body>
<div style="width:50%; border:1px solid #FF0000; padding:5px;">
<input class="textbox" />
</div>
</body>
</html>

User Tag List

Thread: Textbox 100% Width Problem ...

Thread Tools

Display

Hybrid View

Textbox 100% Width Problem ...

Bookmarks

Bookmarks

Posting Permissions