CODEWITHSUNDEEP
htmlcssinternet-explorercss-position
Jochen Schmidt
Jochen Schmidt

Reputation: 109

IE 7/8 ignores relative positioned DIV outside of an abolsute positioned DIV

okay, here we go… this is my HTML-code:

<div id="header">
    <div class="menu-hauptmenu-container">
        <div id="logo">
        <a href="#"></a>
        </div>
    </div>
</div>

the CSS:

.menu-hauptmenu-container {
position:relative;
max-width:960px;
width:90%;
margin-left:auto; 
margin-right:auto;
height:75px;
}
#header {
position:relative;
width:100%;
background:#eb3d3c;
height:75px;
}
#logo {
    position:absolute;
    width:200px;
    height:106px;
    background: url(img/logo.png) no-repeat center;
    top:0;
    left:5px;
    z-index:9999;
}
    #logo a{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
    }

The problem: IE7/8 ignores the relative positioned ".menu-hauptmenu-container" so that the absolute positioned "#logo" gets positioned outside of the parent DIV.

as always it's hard for me to explain technically thinks in english so:

I know, this will not be well-received but here's the live site: http://www.thorstenbreyer.de/kunden/pommerel/tcn/ieproblem/

thanks!

Upvotes: 1

Views: 216

Answers (1)

gaynorvader
gaynorvader

Reputation: 2657

.menu-hauptmenu-container is inside a media query. IE 7 and 8 ignore media queries so it is not positioned correctly.

Upvotes: 2

Related Questions