Search code examples
cssinternet-explorer-7

Why won't this element set to `height: 100%` work in this example in IE7?

I set up this fiddle to show how all browsers render the red pieces.

Strangely, IE7 renders that fine (on its own).

However, I have a shadow effect on a new site (that works the same as the red strips) that works on Firefox, Safari & IE8.

I swear I have used this same method countless times before and it has worked in IE7.

Here is how it looks in IE7. The strips don't grow to the correct height (using IE's developer tools showed me that). They are not just not repeating the background image.

IE7
(source: alexanderdickson.com)

The site is also available here to view. I am using IE8's compatibility view, which I realise isn't strictly a 1:1 of IE7, but I according to NetRender, this also happens on IE7.

Can someone please kindly tell me what I am doing wrong?

Thanks!

<div id="main">
    <p>
Donec laoreet ullamcorper iaculis. Fusce sed dolor vel mi varius dictum. Phasellus vulputate vehicula odio et pulvinar. Cras pulvinar, magna quis cursus tempus; dolor diam tempus magna; a varius magna velit aliquet libero. Donec auctor pulvinar ornare. Fusce fringilla velit fermentum elit ornare quis porttitor justo vestibulum. Sed feugiat leo in tellus elementum venenatis. Praesent enim lacus, luctus ac porta vitae, iaculis eu arcu! Praesent commodo eleifend lacus, non fringilla orci commodo non. Praesent varius adipiscing purus, et accumsan orci porta nec? Cras imperdiet blandit dapibus. Curabitur dolor magna, imperdiet at euismod non, pharetra in turpis. Integer aliquam neque a justo imperdiet fermentum. Aenean et vulputate orci. Aliquam volutpat, sapien sed sollicitudin porta, risus massa gravida nibh; pharetra vulputate nisl orci ac nibh? Fusce vehicula tristique magna ut suscipit. Morbi imperdiet diam quis nibh sagittis consequat.
</p>

<p>
Nunc tempus iaculis justo quis ultrices. Nulla diam orci, euismod sed mattis id, condimentum ac est. Maecenas sodales egestas massa hendrerit ultrices. Fusce ut ante id leo placerat pellentesque. Mauris ante dolor, porta quis blandit vel; tincidunt sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum, nunc vitae posuere suscipit, leo leo dictum nunc, vel laoreet eros dolor ac lacus. Duis at nibh nec lectus commodo vehicula sit amet sed sem. Sed eu massa orci! Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tellus nibh, lacinia sed imperdiet nec, vestibulum ut nunc. Donec fermentum placerat felis, porta lacinia erat pellentesque vel. In eu ornare ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p>
Praesent fringilla mattis lobortis? Sed id porttitor massa! Pellentesque sodales felis et lacus tincidunt sit amet adipiscing arcu aliquam. Proin ullamcorper elementum urna nec mollis. Etiam convallis elementum massa in egestas! Ut pharetra mauris nec mi auctor posuere. Fusce a velit quis tellus accumsan blandit et sit amet odio. In hac habitasse platea dictumst. Nullam nunc orci; pulvinar ac lacinia id, tincidunt at dolor. Curabitur facilisis volutpat sagittis. Maecenas luctus rutrum ante et tincidunt. Nulla non dapibus dui. Proin consectetur pellentesque nunc, ac convallis enim venenatis ut. Aliquam a interdum nibh. Curabitur tristique ipsum ornare ante semper eget luctus nulla volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non est sem. Nulla sodales, metus sit amet ullamcorper mollis, velit velit tempus odio, at tristique diam lorem non risus. Suspendisse dictum lorem laoreet metus euismod gravida. Nullam dapibus magna nisi.
</p>
    <div id="shadow-left"></div>
    <div id="shadow-right"></div>
</div>


html {
 width: 100%;
    height:100%;

}


div#main {
    width: 100px;
    min-height: 100%;
    margin: 0 auto;
    position: relative;


}

#shadow-left,
#shadow-right {
    width: 30px;
    height: 100%;
    position: absolute;
    top: 0;
    background: red;


}

#shadow-left {
    left: -30px;

}

#shadow-right {
    right: -30px;

}
Solution

  • I'm not sure why you would apply your shadows in this manner though. How I usually do it is have a wider container (including the widths of the left/right shadows) aligned center (in this case, it's your #mainContainer div, then set a y-repeating background (that is the shadow - just a couple of pixels high will do). I will then specify another div within this container, smaller width, center aligned, that will contain all the text.

    Edit: Just noticed your fiddle. I think it may not work in this case due to css conflicts, possible from the osCommerce stylesheet? I'll try to look deeper..hmm

    EDIT2: Okay I've traced it to this particular code in stylesheet.css

    #login-link,
#logout-link {
    position: absolute;
    bottom: -20px;
    right: 50px;
    background: #333;
    padding: 5px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 100;
    font-weight: bold;
}

<a href="http://174.121.189.41/~wwwgolf/login.php" id="login-link">Login to GolfBallBusters</a>

    It's your absolute positioning of this element that's causing the problem. Removing the styling fixes your shadow problems. :)

    EDIT FIX: This should fix it. Or at least it does on my stripped down version of your site layout. Change #user and #login-link to the following:

    #user {
    float: right;
    color: #f90;
    position: relative; /* addition */
}

#login-link,
#logout-link {
    position: absolute;
    top: 31px; /* addition */
    /*bottom: -20px; REMOVED */
    right: 50px;
    height: 15px; /* addition */
    white-space: nowrap; /* addition */
    background: #333;
    padding: 5px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 100;
    font-weight: bold;
}

    FIX2:

    Change

    #user-options .bottom-shadow {
    display: block;
    width: 100%;
    height: 7px;
    position: absolute;
    bottom: -7px;
    #bottom: -5px;
    left: 0;
    background: url(images/layout/shadow-bottom.png) repeat-x;
    z-index: 50;
}

    TO 

    .bottom-shadow {
    width: 100%;
    height: 7px;
    margin-top: -10px;
    background: url(images/layout/shadow-bottom.png) repeat-x;
}

    And your HTML layout should be:

        <div id="user-options">
        <div id="choose-your-country">
            <p>Choose your country &gt; </p>         
        </div>

        <div id="user"></div>

        <div id="current-locale">Golf Ball Busters - AU</div>
        <br class="clear">
    </div>
    <div class="bottom-shadow"></div>

    Noticed I change bottom-shadow into a div element and moved it out of <div id="user-options">.