Nested lists ie7 - html

Question

I have a problem with ie 7 and nested lists - this looks freaky deformed.
This is screenshot
HTML (Django template)
{% for category in category_list %}
<ul class='cat_post_container'>
<li class='cat_name' >
{{ category }}
</li>
<ul>
{% for post in category.postpages_set.all %}
<a class='post_name' href="{{ post.get_absolute_url }}">
<li class='post_name'>
{{ post.title }}
</li>
</a>
{% endfor %}
{% for repost in category.redirectpost_set.all %}
<a class='post_name' href="{{ repost.redirect_url }}">
<li class='post_name'>
{{ repost.title }}
</li>
</a>
{% endfor %}
</ul>
</ul>
{% endfor %}
CSS
.cat_post_container {
border-bottom: groove 2px rgba(52, 90, 113, .3);
}
.cat_name {
line-height: 40px;
height: 40px;
margin-top: 15px;
}
.post_name {
text-decoration: none;
width: 100%;
height: 30px;
line-height: 30px;
border-top: groove 2px rgba(52, 90, 113, .3);
color: #FFED93;
}
.post_name a {
text-decoration: none;
color: #FFED93;
position: relative;
}
What the problem with this? How to make behave it normally?

Answer 1

move inner ul under the li because now you have not valid HTML
probably something like this (have no chance to check it):
{% for category in category_list %}
<ul class='cat_post_container'>
<li class='cat_name' >
{{ category }}
<ul>
{% for post in category.postpages_set.all %}
<li class='post_name'>
<a class='post_name' href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</li>
{% endfor %}
{% for repost in category.redirectpost_set.all %}
<li class='post_name'>
<a class='post_name' href="{{ repost.redirect_url }}">
{{ repost.title }}
</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
{% endfor %}