CODEWITHSUNDEEP
htmlcssdjango
nolisgol
nolisgol

Reputation: 103

Why does django insert padding and characters into my html file?

Over the last few days I've been experimenting with Django. I've had some issues with random characters (notably '<') and what I would describe as padding appearing in my html files.

I decided to ignore using Django and rewrote a test template with just html/css. It worked perfectly, and I thought that perhaps it had been an error in my HTML/CSS, until I put the Django template code back in. Now, even though I've removed the Django code and moved the files outside of the root directory for the project, the problem persists. I can't see why this has happened, and the error appears in Firefox, Chrome and even IE. The source looks right in these browsers, but right click -> inspect in Google Chrome shows there's something not right.

Here's the HTML:

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="main.css" />
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="container">
        <div id="header">
            <div class="nav">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
        </div>
        <<div id="content"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

And the CSS:

body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
    width:50%;
    margin:0% 25% 0% 25%;
}
#header {
    height:150px;
        background:#7e9bc9;
    padding-bottom:10px;
}
#content {
    padding-bottom:100px;
}
#footer {
    background:#b4c8e8;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

.nav {
    height:30px;
    width:100%;
    position:relative;
    bottom:-130px;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav li {
    display:inline;
    float:left;
    height:30px;
    width:20%;
}

.nav li a {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size:15px;
    display: block;
    padding: 8px;
    background-color:#093275;
    text-align:center;
    font-size:15px;
    color:white;
    text-decoration: none;
}

Needless to say, I couldn't find similar questions searching Google or stackexchange. Maybe I'm not asking the 'right' question, so please feel free to direct me to an answer if one exists.

Thanks

Upvotes: 0

Views: 933

Answers (1)

vishes_shell
vishes_shell

Reputation: 23504

Because you have that line

<<div id="content"></div>

Double < character, which is wrong.

Upvotes: 4

Related Questions