Home/ Questions/Q 6723637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:35:34+00:00

I have two elements that I am trying to line up, a text box

  • 0

I have two elements that I am trying to line up, a text box and a span. In order for them to line up and look nice in firefox I use:

<input id="myTextBox" style="float: left; margin-right: 5px; position: relative; left: 13.5em; bottom: 1.5em;" type="text" />
<span style="visibility: visible; position: relative; left: 12.5em; bottom: 1.5em;">Enter stuff in the box </span>

However in IE 8 the text box is on top of the span, cutting off the text. If I change the left: 13.5em; to left: 11.8em; it lines up nice in Internet Explorer, but then is off center in Firefox. I am using decorators in a Zend Form so I have to use the inline styles. Is there any way to make the position line up in both browsers?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As your <input> is floating, it might make more sense to use margin-left:10% instead of position:relative and left:10%? Similarly for your span, I would make it display:block;margin-left:10%;clear:left; rather than position:relative;.

    I’ve used 10% because using em for layout has given me cross-browser issues in the past – I only use it for text-based things now.

    • 0