Dushyant Patel’s Blog

CSS issue Input width=100% & padding in IE issue

I was having a problem with width on input[text] fields in IE

In IE, it renders the width as 100% + 10px(padding which i have given for search icon).

HTML:

<div class=”container”>
<input type=”text” value=”Enter Keyword” name=”searchbox”/>
</div>

<div class=”button_div”>
<input type=”submit” name=”button” id=”button” value=”Search” />
</div>

CSS:

.container{ width:250px; float:left}
.button_div {width:100px; float:right}
.container input{ width:100%; max-width:100%; padding-left:10px;}

Soltuion:
Wrap the input field with a 100% div with no padding and no margin and set the input field inside that div to 100% width with a padding of 10px

<div class=”container”>
<div style=”width:100%”>
<input type=”text” value=”Enter Keyword” name=”searchbox”/>
</div>
</div>

Advertisements

Filed under: Technology

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: