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>
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.
Same thing in IE 6. Adding position: absolute; solved it in IE 6, so hopefully it does the same in IE 7:
<span style='margin-left:-50px; position: absolute;'>TEXT</span>
IE7 seems to have issues with negative margins: http://www.brunildo.org/test/relayout.html
It seems to work flawlessly in IE8, so it should definitely be an IE7 bug.
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 叼着烟拽天下 的文章《IE 7 negative margin error》','https://www.manongdao.com/article-806479.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}