Nested lists ie7
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' >
<a href="{{ category.get_absolute_url }}">{{ category }}</a>
</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&g开发者_运维知识库t;
{% 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?
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' >
<a href="{{ category.get_absolute_url }}">{{ category }}</a>
<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 %}
精彩评论