I'm been learning the Flask framework and am confused how Jinja/Flask is able to render a <head> element inside a <body> tag. It does this on all my child templates and I believe that my code is exactly like my two tutorial videos tell me to. I'm not sure why it does this and how my code is wrong; all of the other {% block %} tags work normally.
Here is my base template:
<!doctype html>
<html lang="en">
<head>
<title>
{% block title %} ⚠!⚠!⚠!⚠!⚠ {% endblock %}
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/noauth.css') }}" />
<link rel="icon" href="{{ url_for('static', filename='styles/favicon.png') }}" type="image/png" />
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Here is my child template (one example):
{% extends "base.html" %}
{% block title %} !⚠ Access Denied! ⚠! {% endblock %}
{% block content %}
<div class="">
<center>
<h1>Yo, go <a href="{{ url_for('index') }}"><big>BACK</big></a> and put the password in!</h1>
</center>
</div>
<br/>
{% endblock %}
Here is what it's doing on all child templates that inheret base.html:
I'm wondering if it's possible that sublime text has ruined my code. A couple of comments I saw online mentioned it, but it was still very illogical even though I did have some text editor problems. I'm looked through all of my code and tried everything I could think of, but I'm still not sure how to fix this error.
@danielb helped me in the comments figure out that having * {display: block;} in my CSS was causing this very strange error. Thanks to them and this is twice today that I had bizarre errors because of a display: setting.
The reason for this is because * will set display: block; to <head><title> elements but use in the document because of the display: block;. TIL that CSS applies styles to <head> items also.
