z-index

Dimanchik87 · January 2, 2013

Не работает Z-index

В ие отказывается работать z-index,везде всё нормально http://clip2net.unet.by/page/m0/99482 ,а в ИЕ вот так http://clip2net.unet.by/page/m0/99483.

css

*{
    margin:0;
    padding:0;
    }
    .top,.bottom{
    width:162px;
    height:8px;
    background:#ebe9e4;
    float:left;
    margin:0 25px 40px;
    }
    #news{
    clear:both;
    margin:0 0 15px 30px;
    font:0.8em calibri;
    }
    #news span{
    font:bold 1.2em calibri;
    color:#353434;
    }
    #pict1{
    width:578px;
    height:204px;
    }
    #main{
    position:relative;
    height:315px;
    }
    #eat{
    position:absolute;
    top:-5px;
    left:24px;
    }
    #shop{
    position:absolute;
    top:-5px;
    left:236px;
    }
    #live{
    position:absolute;
    top:-5px;
    left:453px;
    }
    .vertical{
    width:10px;
    height:114px;
    float:left;

    }
    #v1{
    background:#00639b;
    }
    #v2{
    background:#857372;
    }
    #v3{
    background:#9ccece;
    }
    .col{
    width:162px;
    height:122px;
    background:#ebe9e4;
    float:left;
    margin-left:-5px;
    margin-top:-170px;
    padding-top:180px;
    position:relative;
    z-index:-1;
    }
    #main ul,.caption{
    list-style:none;
    font:0.8em calibri;
    clear:both;
    overflow:hidden;/*hasLayout for ie*/
    }
    #main li,.caption{
    float:right;
    margin-right:20px;
    }
    .caption{
    font:1.5em calibri;
    color:#033263;
    margin-bottom:15px;
    }
    #house,#puma,#magazine{
    clear:both;
    float:left;
    height:67px;
    }
    #house{
    width:168px;
    }
    #puma{
    width:165px;
    }
    #magazine{
    width:167px;
    height:75px;
    margin-top:-7px;
    }
    .title{
    float:left;
    clear:both;
    font:1.5em calibri;
    color:#00639b;
    }
    .description{
    clear:both;
    width:150px;
    font:0.8em calibri;
    }
    .description img{
    display:inline-block;
    width:17px;
    height:8px;
    }
    .bottom{
    clear:both;
    height:12px;
    margin:25px 0 10px;
    }
    #live .bottom{
    margin-top:24px;
    }
    #footer ul{
    clear:both;
    list-style:none;
    font:0.8em calibri;
    color:#899681;
    margin:0 0 10px 25px;
    }
    #footer li{
    display:inline;
    }
    #footer span{
    color:blue;
    }

html

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CONRAN</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div class="top"></div>
    <div class="top"></div>
    <div class="top"></div>
    <div id="news"><span>CONRAN NEWS </span>: Special Offers avaliable at selected Conran Restaurants</div>
    <img src="pict1.jpg" title="buy online" alt="buy online" id="pict1">
    <div id="main">
    <div id="eat">
    <div class="vertical" id="v1"></div>
    <div class="col">
    <p class="caption">eat</p>
    <ul>
    <li>FIND A RESTAURANT</li>
    <li>BOOK A TABLE</li>
    <li>SPECIAL OFFERS</li>
    <li>CONRAN EVENTS</li>
    </ul>
    </div>
    <img src="house.jpg" title="" alt="" id="house">
    <p class="title">opening soon</p>
    <div class="description">Dublin Bay prawns: lobster fishcakes: sticky toffee pudding and more ...<img src="go.jpg" alt="" title=""></div>
    <div class="bottom"></div>
    </div>
    <div id="shop">
    <div class="vertical" id="v2"></div>
    <div class="col">
    <p class="caption">shop</p>
    <ul>
    <li>CONRAN SHOP</li>
    <li>ONLINE SHOPPING</li>
    <li>ACHATS EN LIGNE</li>
    <li>CONRAN CONTRACTS</li>
    </ul>
    </div>
    <img src="puma.jpg" title="" alt="" id="puma">
    <p class="title">new for autumn</p>
    <div class="description">Footwear from Phillipe Starck and Puma in store now <img src="go.jpg" alt="" title=""></div>
    <div class="bottom"></div>
    </div>
    <div id="live">
    <div class="vertical" id="v3"></div>
    <div class="col">
    <p class="caption">live</p>
    <ul>
    <li>LIVE IT MAGAZINE</li>
    <li>CONRAN NEWS</li>
    <li>CONRAN CARD</li>
    </ul>
    </div>
    <img src="magazine.jpg" title="" alt="" id="magazine">
    <p class="title">live it magazine</p>
    <div class="description">Selected highlights from Live It, the Conran magazine <img src="go.jpg" alt="" title=""></div>
    <div class="bottom"></div>
    </div>
    </div>
    <div id="footer">
    <ul>
    <li>TERENCE CONRAN</li>
    <li><span> | </span>CONRAN &AMP; PARTNERS</li>
    <li><span> | </span>CONRAN CARD</li>
    <li><span> | </span>CONRAN GROUP</li>
    <li><span> | </span>JOBS</li>
    <li><span> | </span>CONTACT US</li>
    <li><span> | </span>PRIVACY</li>
    </ul>
    </div>
    </body>
    </html>

Edited January 2, 2013 by alexriz
Оформляйте код в тег CODE

lexxcode · January 2, 2013

Вы лучше бы ссылку на страницу с проблемой дали или на http://jsfiddle.net/ выложили.

Так в монолитном куске кода сложно разбираться. Но в старых ИЕ есть проблемы с z-index - это факт

Dimanchik87 · January 3, 2013

Вы лучше бы ссылку на страницу с проблемой дали или на http://jsfiddle.net/ выложили.
Так в монолитном куске кода сложно разбираться. Но в старых ИЕ есть проблемы с z-index - это факт

http://jsfiddle.net/dimanchik87/DHrg8/

Также не пойму почему не работает justify

http://jsfiddle.net/dimanchik87/DHrg8/9/

решение по z-index найдено

вопрос про justify по прежнему актуален

Edited January 3, 2013 by alexriz

Seldon · January 3, 2013

Добрый день,

немного не понял, что именно с justify у вас не работает? В примере всего одно слово и по-ширине меньше ширины родительского блока

Dimanchik87 · January 3, 2013

Добрый день,
немного не понял, что именно с justify у вас не работает? В примере всего одно слово и по-ширине меньше ширины родительского блока

Хочу растянуть это слово на всю ширину блока

Dimanchik87 · January 3, 2013

решение найдено letter-spacing

Sign In

z-index

Question

Dimanchik87

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

lexxcode

Link to comment

Share on other sites

Dimanchik87

Link to comment

Share on other sites

Seldon

Link to comment

Share on other sites

Dimanchik87

Link to comment

Share on other sites

Dimanchik87

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information