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' >
             <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>                    

            {% 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' >
            <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 %}