IE 7 negative margin error

css, html, internet-explorer

Solution

Margins are not reliable on inline elements. Newer browsers handle it ok, but older ones still don't work the way you expect them to in many cases. So you may need to make the element a block level element (which will then cause you to potentially need to use a float to bring it back inline before positioning it over the form element, which is what I assume is the intended final position.

Also, z-index will only work for elements that are positioned. I'm surprised that position: relative messes other things up, but position: absolute doesn't, my go to fix would be to use { position: relative; left: -50px; z-index: 10; } to slide the span over.

Problem

With this code the "TEXT" doesn't show up in IE 7. I think its behind the input? Giving it a zindex dosn't help, and i can't use position:relative because it messes other stuff up. any ideas of how to fix? ``` <!DOCTYPE html> <input/><span style='margin-left:-50px;'>TEXT</span> ```

Original source