Едет меню на основе UL LI в IE 6 и 7 :(

Eirene · April 6, 2010

Здравствуйте!

Вот такая белиберда получается :angry: Тут лежит zip с файлами.

Почему так происходит? Что браузеру не нравится?

6 ИЕ:

7 ИЕ:

А так это выглядит в Мозилле или Хроме:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <meta http-equiv="keywords" content=""/>
    <meta http-equiv="description" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <title>Ekos</title>

</head>
<body>
<!-- body -->
<div id="top">
    <!-- header -->
    <div id="header">
    </div>
    <!-- end of header -->

    <!-- menu -->

    <!-- end of menu -->

    <!-- content -->
    <div id="body" class="clearfix">


        <div id="leftCol">
            <div id="menuUL">
                <ul>
                    <li><a href="/">Главная</a></li>
                    <li><a href="/">О нас</a></li>
                    <li class="current"><a href="/">Новости</a>
                        <ul>
                            <li class="current"><a href="/">Фотогалерея</a>
                                <ul>
                                    <li><a href="/">Салон</a></li>
                                    <li><a href="/">Процедуры</a></li>
                                    <li class="current"><a href="/">Косметика</a></li>
                                    <li><a href="/">Специалисты</a></li>
                                </ul>
                            </li>
                            <li><a href="/">Статьи</a></li>
                        </ul>
                    </li>
                    <li><a href="/">Меня беспокоит</a></li>
                    <li><a href="/">Прайс лист</a></li>
                    <li><a href="/">Отзывы</a></li>
                    <li><a href="/">Контакты</a></li>
                </ul>
            </div>

        </div>

        <div id="rightCol">
        </div>

    </div>
    <!-- end of content -->
</div>
<!-- end of body -->

<!-- footer -->
<div class="clear"></div>
<div id="bottom" class="clearfix">
</div>
<!-- end of footer -->
</body>
</html>

/*******************************************************************************
  RESET
*******************************************************************************/

html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*******************************************************************************
  TEMPLATES
*******************************************************************************/

/* CLEARFIX */

.clear{
    clear: both;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */
/* END OF CLEARFIX */

/*******************************************************************************
  MAIN
*******************************************************************************/

html, body {
    height: 100%;
}
body {
    font: normal 100% Palatino Linotype, serif;
    background: #a7d9c6 url(../img/body-bg.gif) center top repeat-y;
}
a:hover {
    text-decoration: none;
}

/*******************************************************************************
  STRUCTURE:BASE
*******************************************************************************/

#top {
    position: relative;
    width: 980px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    border-left: #88b0a1 4px solid;
    border-right: #88b0a1 4px solid;
}
#body {
    position: relative;
    padding: 25px 0 125px 0;
    background-color: #fff;
}
    #header {
        position: relative;
        height: 201px;
        background: #fff url(../img/logo.jpg) 50% 15px no-repeat;
        border-bottom: 7px solid #dcdcdc;
    }

    #leftCol{
        float: left;
        margin-bottom: 25px;
        padding-left: 45px;
        width: 220px;
    }
        #leftCol #menuUL{
            width: 174px;
            padding: 0 46px 10px 0;
            font-size: 15px;
            line-height: 1.5;
        }
            #leftCol #menuUL a{
                color: #16513b;
            }
            #leftCol #menuUL ul li{
                text-transform: uppercase;
            }
            #leftCol #menuUL ul li.current{
                background: #dcdcdc url(../img/menu-top.gif) top left no-repeat;
                margin-left: -17px;                
            }
            #leftCol #menuUL ul li.current a{
                padding-left: 17px;
                display: block;
                background: url(../img/menu-bottom.gif) bottom left no-repeat;
                }
                #leftCol #menuUL ul li.current ul li{
                    padding-left: 19px;
                    background: none;
                    background-color: #fff;
                    text-transform: none;
                }
                #leftCol #menuUL ul li.current ul li.current{
                    padding-left: 36px;
                    background: none;
                    background-color: #fff;
                }
                #leftCol #menuUL ul li.current ul li a{
                    background: none;
                    text-decoration: underline;
                    color: #585757;
                }
                #leftCol #menuUL ul li.current ul li.current a{
                    background: none;
                    text-decoration: underline;
                    color: #585757;
                }
                    #leftCol #menuUL ul li.current ul li.current ul li{
                        background: transparent url(../img/li.gif) no-repeat 30px 6px !important;
                        padding-left: 21px;
                    }
                    #leftCol #menuUL ul li.current ul li.current ul li.current{
                        background: transparent url(../img/li.gif) no-repeat 47px 6px !important;
                        padding-left: 38px;
                    }
                    #leftCol #menuUL ul li.current ul li.current ul li a{
                        font-size: 11px;
                    }
                    #leftCol #menuUL ul li.current ul li.current ul li.current a{
                        text-decoration: none;
                    }


    #leftCol-main a, #leftCol a{
        text-decoration: none;
    }

    #rightCol{
        margin-left: 265px;
        padding: 0 45px 20px 45px;
        width: 621px;
        font-size: 14px;
        color: #4d4c4c;
        border-left: #dcdcdc 1px solid;
    }

#bottom {
    position: relative;
    width: 980px;
    height: 100px;
    margin: -100px auto 0;
    padding-top: 30px;
    font-size: 12px;
    color: #4d4c4c;
    background: #dcdcdc url(../img/footer-top.jpg) 0 0 no-repeat;
    border-left: #88b0a1 4px solid;
    border-right: #88b0a1 4px solid
}

psywalker · April 6, 2010

zoom:1;

Eirene · April 6, 2010

Благодарю!

Надо изучить zoom: 1 подробнее, очень полезная штука оказалась))

p.s. обрезка отрицательного margin в ИЕ 6 решилась путем добавления position: relative;

psywalker · April 6, 2010

Благодарю!
Надо изучить zoom: 1 подробнее, очень полезная штука оказалась))
p.s. обрезка отрицательного margin в ИЕ 6 решилась путем добавления position: relative;

Отлично, изучи обязательно!

Sign In

Едет меню на основе UL LI в IE 6 и 7 :(

Question

Eirene

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Eirene

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information