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

Question

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.

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!

Answer 1

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">.

Answer 2

try giving #mainContainer height: 100%