position relative top/bottom ignored internet explorer 6/7_问答_开发者

position relative top/bottom ignored internet explorer 6/7

开发者 https://www.devze.com 2023-03-28 15:32 出处：网络

Code: <div class=\"container_16\" id=\"enlacesSeo\"> <div id=\"titulo_destinos\"> <h2>PRINCIPALES DESTINOS</h2>

Code:

    <div class="container_16" id="enlacesSeo">
        <div id="titulo_destinos">
            <h2>PRINCIPALES DESTINOS</h2>
        </div>
        <div id="destinos">
            <ul class="enlacesSeo">             
                <li>Items</li>
                                <li>Items</li>
            </ul>
        </div>
    </div>
    <div class="clearfix"></div>

CSS:

*Enlaces principales destinos - SEO */
#enlacesSeo {
    border-bottom: 1px solid #DDD;
    height:50px;
    position:relative; top:-15px;
    margin-bottom:5px;



}
* html .enlacesSeo {
    /*hack IE6*/
     position: relative;
     bottom: 30px;
}

*+html #enlacesSeo {
    bottom: 30px;
}

#enlacesSeo div#titulo_destinos{
    float:left;
    width:179px;
    border-right: 1px solid #ddd; 
}

Firefox, chrome and Opera OK; Internet Explorer 6/7, ignored :(

Even tried:

* html .enlacesSeo开发者_JS百科 {
    /*hack IE6*/
     position: relative;
     bottom: 30px;
}

Any idea what i'm doing wrong?

Take a look to the pictures

position relative top/bottom ignored internet explorer 6/7

IF you have position: relative and both top and bottom, the top wins, so if you want to set the bottom value, you need to set top: auto first.

So, in your case it would be

* html #enlacesSeo {
    /*hack IE6*/
     top: auto;
     position: relative;
     bottom: 30px;
}

*+html #enlacesSeo {
    top: auto;
    bottom: 30px;
}

#enlacesSeo refers to an ID, not to a class. .enlacesSeo would target the class.

* html .enlacesSeo would never target anything because there is no parent element for <html>.