I have the following code that works fine in IE and in Firefox, but doesn't work correctly in Opera or Chrome. The code basically creates a DIV that is inserted directly after the input. In IE and Firefox, the new div will appear overlapping the input. However in both Opera and Chrome the div will appear next to the lower right corner of the input, the positioning isn't working correctly. Any suggestions?
Edit: I've included an image of what I want it to look like, it isn't doing this in Chrome and Opera. The overlap is deliberate. In Chrome/Opera the green div is placed at the lower right corner, this is a starting place, but the position CSS class should modify that.
(source: aspadvice.com)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script>
<script type="text/javascript">
jQuery.fn.makeDiv = function () {
$(this).each(function () {
var className = "wFWn";
$(this).after("<div class='" + className + "'>The Div</div>");
var c = $(this).next("." + className);
var topStartPosition = $(this).outerHeight();
var leftStartPosition = $(this).outerWidth();
c.addClass('green');
c.addClass('position');
var pos = $(this).offset();
var iTopOffset = 0;
if (c.css("top") != "auto")
iTopOffset = parseInt(c.css("top").substring(0, c.css("top").indexOf("px")));
var iLeftOffset = 0;
if (c.css("left") != "auto")
iLeftOffset = parseInt(c.css("left").substring(0, c.css("left").indexOf("px")));
c.offset({ top: pos.top + topStartPosition + iTopOffset, left: pos.left + leftStartPosition + iLeftOffset });
c.css("position", "relative");
});
return this;
};
$(document).ready(function () {
$("#txtTest2").makeDiv();
});
</script>
<style type="text/css">
.position {top: -4px; left: -100px; width: 140px; font-size: 11px; }
.green { background-color: lime; border: solid 1px black;}
</style>
</head>
<body>
<div id="two">
<input name="txtTest2" type="text" maxlength="10" id="txtTest2" /><br />
</div>
</body>
</html>