Bitesize Bugs

Building an inline search box

This article provides a workaround for Internet Explorer’s bug when handling padding-right on text input elements.

The problem is clearly visible when building a particular search box design, with the search button included in the search field. Internet Explorer will allow long search queries to slide under the search button.

A feasible workaround for IE’s padding problem is to wrap the search button and the input field in a container that you can style to look like an input.

Example

See a working example of the inline search box.

Inline search box that looks and works fine in all major browsers.

Inline search box that looks and works fine in all major browsers.

HTML Markup

<form action="#" method="get" >
  <input type="text" name="q" value="Search for..."/>
  <button type="submit">Search</button>
</form>

CSS

form{
  padding:1px 5px 1px 3px;
  border:3px solid #ebebeb;
  ...
}

input{
  border:none;
  border-color:transparent; /*Fix IE*/
  ...
}

button{
  width:16px;
  height:16px;
  outline:none;
  border:none;
  background:#5AB300 url(button_search.png) left center no-repeat;
  text-indent:-999px;
  ...
}

Removing the input border

Using the border: none property will remove the input's border from most browsers but not for Internet Explorer. In order to fix IE's input border you need to also add border-color: transparent. More about this issue on IE's buggy border property in this article.

The search button

The search button is placed inline with the input element but inside the container that looks like an input. There is a reason for this placement instead of assigning a negative left margin to the button. In Internet Explorer the input will not apply padding-right correctly so the input's text value will slide under the button for long strings.

I wrote more about this problem in an article about IE's problem with right padding on input elements.

Accessibility

When you disguise the input by removing its border the element will still show its true dimensions when in focused state. This is caused by the outline property you can set with CSS. The outline on input elements is very prominent in Safari as a bright blue halo around the editable content area.

Focused input on safari shows a bright blue halo

Focused input on Safari shows a bright blue halo

Due to accessibility concerns my suggestion is that you don't remove the outline from the input. Users used with Safari will understand that they're actually typing in an input there.

If, however, there are other concerns that prevent you from using Safari's blue halo you can disable it by using:

input{
  outline:none;
}

Focus state workaround

When disabling the browser's default focus style on input elements I strongly suggest that you at least offer an alternative. You can do so with JavaScript by assigning a modifier class name on the container that would change its border or background color when the input is focused.

Here's a quick jQuery workaround for the above example:

$('input')
  .bind('focus', function(){
    $(this).parents('form').addClass('focus');
  })
  .bind('blur', function(){
    $(this).parents('form').removeClass('focus');
  })

And the required CSS:

.focus{
  border-color:#09c; /* a blue border color */
}

.focus input{
  outline:none; /* cancel the browser's default input outline */
}
Alternative for the browser’s default focused state by using a modifier CSS class

Alternative for the browser’s default focused state by using a modifier CSS class

Hidden text

Another accessibility concern you should have is the search button's text value. I used an image background for the button and hid the text. You might think I could have used an input type="image" or I could have just let the button tag empty, but I didn't.

I chose to hide the text off-screen, but leave it contextually in the page structure, because a screen reader would actually interpret that text to a visually impaired user.

button{
  text-indent:-999px;
  ...
}

This is also useful in an environment with little or no CSS support because it will keep the search box usable by replacing the arrow I used with a valid control.

Filed under: CSS, Front-end, How to, HTML

Padding right problem on text input in Internet Explorer

Internet Explorer does not correctly apply right padding on text and password inputs.

This problem is clearly visible when placing another element over the input, a common case in search box design patterns.

Demo

Have a look at the live code example.

Padding right problem on input elements in Internet Explorer.

Right padding problem on input elements in Internet Explorer.

The input’s text value slides under the button element in Internet Explorer, while in other browsers it is correctly hidden because of the padding property.

Code Example

HTML markup

<input type="text" name="textInput" />
<button type="submit">Search</button>

CSS

input{
  padding-right:30px;
  ...
}
button{
  margin-left:-30px;
  ...
}

Workaround

Since there's no obvious solution for Internet Explorer's right padding problem, a feasible workaround is to visually fake the input. You can do so by wrapping the markup in a container that you can style to  look as an input field.

I've written a separate article to tackle this workaround for building an inline search box.

Filed under: CSS, IE6, IE7

Double 50% width float problem in Internet Explorer

Problem

Two floated 50% width elements in a container that has an odd width will clear each other in Internet Explorer. One of them will always clear and move under to the next level.

Reason

This issue is due to IE’s way to calculate sub-pixel dimensions. Internet Explorer will approximate to the next higher integer any half-pixel dimension.

If you are dealing with two floated elements 50% in width that are nested in a 1001px width container, IE will not work with two 500.5px elements but two 501px ones. This is the reason why the last element in the sequence will always clear the other one, because they will not both fit the container’s given dimension.

Example

CSS:

#container{
  width:1001px;
}
.floated{
  width: 50%;
  float: left;
}

HTML Markup:

<div id="container">
  <div class="floated">
  ...
  </div>
  <div class="floated">
  ... 
  </div>
</div>

Browsers affected

You will encounter this bug in IE6, IE7 and it is yet to be fixed in IE8.

Filed under: CSS, HTML, IE6, IE7, IE8

So what’s it about?

Bitesize Bugs is a collection of short articles that expose pesky bugs in front-end web technologies like JavaScript, CSS, HTML and browser behaviors gone bad.
Follow

Get every new post delivered to your Inbox.