﻿id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
20787	Django template changes width of html element during append	gregoryronin@…	nobody	"I filed this issue with stackoverflow.com under the same title. This looks like a Django problem to me. Here is the description:

Below you will find the HTML code. The problem is that: if you try to load the specified below HTML code 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 src=""http://code.jquery.com/jquery-1.9.1.js""></script>

<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> "	Bug	closed	Template system	1.5	Normal	worksforme	template css width		Unreviewed	0	0	0	0	0	0
