Question

Take the following example:

This is a textarea, with a background image (the grey bar) and a relative positioned div after the textarea with a top offset to move the text in place.

The Markup:

<textarea cols="40" rows="6" class="some_textarea">Hello</textarea>
<div class="message_text">This is a message</div>

The CSS:

.some_textarea {
  background: transparent url(gray_bar.png) repeat-x 50% 100%;
  width: 99%;
  padding: 5px;
  margin: 0;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 13px;
  border: 1px solid #C3C3C3;
}

.message_text {
  display: inline;
  color: #999;
  font-size: 10px;
  position: relative;
  top: -21px;
  padding: 0 6px;
}

The problem is that Firefox is the only browser that doesn’t agree with the offset, and results in this very small pixel pushing annoyance:

What is causing this? How can I fix this for consistency? What non-clunky workarounds exist if it can’t be fixed?

Answer 1

UPDATE

http://jsfiddle.net/UnsungHero97/maHkr/7/

---

How about something like this…

http://jsfiddle.net/UnsungHero97/maHkr/2/

What I did was wrap your textarea/message combo in a relatively positioned div and then absolutely positioned the message to the bottom left. You can play round with the exact positioning/margins/paddings to get it looking good across the browsers.

I hope this helps.
Hristo