开发者

Nested lists ie7

I have a problem with ie 7 and nested lists - this looks freaky deformed. This is screenshot

Nested lists ie7

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 %}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜