Выравнивание меню по горизонтали в ие7

IvanRu08 · July 22, 2013

Всем привет. Уже несколько часов пытаюсь выровнять меню по горизонтали в ие7. Для решения проблемы использовал css хак для ие7:

*:first-child+html .nav.menu ul li {
    zoom:1;
    display: block;
    position: relative;
}

В ие7 изменений не произошло, зато в ие8 все стало на свои места .

Вот полный код, к сожалению разместить на хостинге пока не могу:

/**General**/
* {
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
body {
    font-family: Arial;
    background: #f1f1f1;
    min-width: 960px;
}
header,nav,section,footer,aside {
    display: block;
    height: 1%;
}
*:first-child+html .nav.menu ul li {
    zoom:1;
    display: block;
    position: relative;
}
/**Main**/
#wrapper {
    width: 1118px;
    height: 1343px;
    margin: auto;
}
/**Header**/
header {
    height: 330px;
}
.header-bg {
    height: 330px;
    background: url(images/header-bg.jpg) no-repeat;
}
/**Logo**/
.logo img {
    position: relative;
    margin-left: 89px;
    margin-top: 26px;
}
/**Menu**/
nav.menu {
    font-family: Arial;
    margin-left: 400px;
    margin-top: -48px;
}
nav.menu ul li {
    display: inline-block;
    list-style-type: none;
    margin-right: -11px;
    padding: 9px 9px 8px;
}
nav.menu ul li a{
    font-weight: bold;
    font-size: 12px;
    color: #f1f1f1;
    text-decoration: none;
    text-transform: uppercase;
    padding: 9px 9px 8px;

}
nav.menu ul li a:hover {
    box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.75);
    border-bottom: 1px solid #313a44;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #14191f;
}
nav.menu ul li.current a {
    box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.75);
    border-bottom: 1px solid #313a44;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #14191f;
}
/**SocialButton**/
.h-social img.rss {
    background: url(images/rss-sprite.png) no-repeat;
}
.h-social img.rss:hover {
    background-position: 0 -26px;
}
.h-social img.twitter {
    background: url(images/tw-sprite.png) no-repeat;
}
.h-social img.twitter:hover {
    background-position: 0 -26px;
}
.h-social img.plus {
    background: url(images/plus-sprite.png) no-repeat;
}
.h-social img.plus:hover {    
    background-position: 0 -26px;
}
.h-social img.facebook{
    background: url(images/face-sprite.png) no-repeat;
}
.h-social img.facebook:hover {    
    background-position: 0 -26px;
}
.h-social ul{
    list-style-type: none;
}
.h-social ul li {
    margin-bottom: 20px;
    margin-left: 1062px;
}

<!DOCTYPE html>
<html lang = "ru">
    <head>
        <title>Блог курского бомжа</title>
          <link href = "style.css" rel = "stylesheet" type = "text/css"/>
          <meta charset = "utf-8"/>
          <!--[if lt IE 9]>
               <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
    </head>
    <body>
        <div id = "wrapper">
            <header>
                <div class = "header-bg">
                    <div class = "logo">
                        <a href = "#"><img src = "images/logo.png" alt = "Блог Курского Бомжа"></a>
                    </div>
                    <nav class = "menu">
                        <ul>
                            <li class = "current"><a href="#">Главная</a></li>
                            <li><a href="#">Карта блога</a></li>
                            <li><a href="#">Мои цели</a></li>
                            <li><a href="#">Мои услуги</a></li>
                            <li><a href="#">Об авторе</a></li>
                        </ul>
                    </nav>
                    <div class = "h-social">
                        <ul>
                            <li><a href="#"><img class = "rss" src = "images/soc-b.png" alt = "RSS"></a></li>
                            <li><a href="#"><img class = "twitter" src = "images/soc-b.png" alt = "TWITTER"></a></li>
                            <li><a href="#"><img class = "plus" src = "images/soc-b.png"></a></li>
                            <li><a href="#"><img class = "facebook" src = "images/soc-b.png" alt = "facebook"></a></li>
                    </div>
                </div>
            </header>
            <div id = "main">
                <div class = "content"></div>
                <aside class = "right"></aside>
            </div>
        </div>
        <footer></footer>
    </body>
</html>

+мне кажется, что ие7 просто не понимает некоторых стилей. Так в пункте меню нет нижней серой рамки, например.

npofopr · July 22, 2013

1. выкладывайте код на http://jsfiddle.net/ или подобные

2. что значит по горизонтали?

http://css-live.ru/articles/krasivoe-vyravnivanie-blokov-po-rezinovoj-setke.html - нет?

IvanRu08 · July 22, 2013

про http://jsfiddle.net/ знаю, но как туда картинки прикреплять? По горизонтали значит в один ряд. За ссылку спасибо, почитаю

PS, Почитал в статье используется zoom:1; display: inline; для ie7. У меня этот прием не работает.

Edited July 22, 2013 by IvanRu08

IvanRu08 · July 22, 2013

Фух, спасибо разобрался. Написал:

*:first-child+html .nav.menu ul li {

zoom:1;

display: inline;

}

вместо:

*:first-child+html (без точки)nav.menu ul li {

zoom:1;

display: inline;

}. Но вопрос про непонимание некоторых стилей ие7 остался.

npofopr · July 22, 2013

http://selectivizr.com/ в помощь

Vin · July 23, 2013

http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Аккуратнее всего делать так:


<!--[if lt IE 7]>	  <html class="ie6"> <![endif]-->
<!--[if IE 7]>		 <html class="ie7"> <![endif]-->
<!--[if IE 8]>		 <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>		 <!--<![endif]-->

Sign In

Выравнивание меню по горизонтали в ие7

Question

IvanRu08

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

IvanRu08

Link to comment

Share on other sites

IvanRu08

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information