0

So I've just started out playing around with Django (Python) and have noticed some CSS differences I haven't stumbled upon before. And with before I mean during the past years coding mostly HTML/CSS/PHP.

So if I write this in my style.css..

#container {
    background: black;
}

I expect this "p" tag below to have a black background, but that's not the case.

<div id="container">
    <p>Test</p>
</div>

Somehow "p" overrides the black background of the container-div and I cant figure out why since I haven't written any specific styling rules for the "p" tag. If I remove the "p" tag the container receives its black background.

When I go outside of my Django-project and try this, everything is back to how I normally find it to behave.

Is there any setting in Django I can change or what is the reason for this occurrence?

EDIT: Just wanted to clarify that I haven't included any normalize.css or something like that. The code in this post is the only thing that exists (other than standard Django-files of course), this project which the post asks about was created just for this post.

Improve this question
3
  • right click, inspect element (if you are using chrome or ff)? Commented May 1, 2014 at 15:34
  • @Pete I have inspected it already. Can't find anything strange. Commented May 1, 2014 at 17:29
  • Mustn't have inspected it very well if your answer is correct - those styles would have shown up when you inspected the element Commented May 2, 2014 at 12:04

3 Answers 3

Reset to default
1

It may be the order in which Django serves up the static assets. Are you running collectstatic?

In any event, you should be able to definitively declare the background color as follows:

#container {
    background: black;
}

#container p {
    background: black;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

No I'm not running collectstatic as far as I know. Yes, the second snippet where I point to the "p" tag directly related to container works but unfortunately that doesn't resolve my question :(
@user2624679, I would contend that this answer does answer your question. It resolves the CSS issue, and it offers that the sequence of asset loading is likely what is causing your problems. There's no setting in Django that you can toggle to change behavior, but you can manually switch up the sequence in which CSS files are loaded.
Isn't collectstatic for projects that are in production? I'm still developing my project.
@user2624679, collectstatic is typically for production deployments, yes. In your case, it seems that there's an issue with the order in which your CSS files are being loaded, which the #container p CSS declaration resolves. Answer your question?
0

It doesn't have anything to do with django or python.

There must be a specific style somewhere for that p tag. You probably have included a css framework or possibly a reset stylesheet.

Improve this answer

11 Comments

I haven't included anything. Maybe Django includes something CSS-related by default?
What happens if you take everything out of your CSS stylesheet and only have: #container { background: black; }
That's exactly what I have done. For more info, read the first EDIT.
What is the method you are using to call this single css file? For example: <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}" />
I'm using {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'blog/style.css' %}" />
|
0

Figured out the problem myself.

Had a chunk of

* {
    font-family: Sans-serif;
    color: #555;
    margin: 0;
    padding: 0;
    background: #F5F5F5;
}

In my css-file which overruled the background for my div even if I added code below that snippet. Is this normal though?

Improve this answer

1 Comment

If this is truly the answer to your issue, then you should consider deleting the question altogether – it's too narrow in scope to be of material assistance to other users. Also, the answer posted above rectifies your styling issue... so I'm not sure how credible this is as an answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.