Below you will find the HTML code. If you try to load it into the browser directly, both alerts (before placement onto "body" and after) will give you width=498px as expected.
However, if you set it up as Django template and run with Django development server, the second alert (after placement onto "body") will give you a slightly different number depending on the browser: Firefox gives 497.76666px, IE gives 498.1px. I have not checked other browsers.
It is important to note, that it is that combination of css attributes ("left", "top", "width", "height", "border-width", "background-color", "border-style") that shows the problem. If you remove at least one of them, the problem goes away.
If you happen know what is going on and/or what the viable workaround is, I would really appreciate it. Thanks. Here is the code:
<!doctype html>
<html lang="en">
<head>
<script>
$(function() {
var my_element = $("<div/>")
.addClass("my_element")
.attr("id", "my_element1")
.css("position", "absolute")
.css("left", "0px")
.css("top", "0px")
.css("width", "498px")
.css("height", "300px")
.css("border-width", "1px")
.css("background-color", "#999966")
.css("border-style", "solid");
alert("width:" + my_element.css("width"));
$("body").append(my_element);
alert("width:" + my_element.css("width"));
});
</script>
</head>
<body>
</body>
</html>