CSS not resizing images in certain browsers

Question

I've on my site I've got two images inside their own parents divs (the full structure for each is div a img). The divs have fluid heights (height: 10%;). The images within are set to max-height: 100%;. The images size properly within Webkit, but every other browser seems to have problems with one or both. I've tried searching for possible solutions, but I can't even begin to imagine what the cause even is.

Since it's probably easier to just show you guys, here are the relevant pages and files:

• Main page (the center logo image and the "CRASH" logo at the bottom)
• CSS (the relevant divs are .logo and .crash)

Below is a breakdown of what I'm seeing. Thanks for any help!

edit: Never actually mentioned what the undesirable result was. In the browsers where it's broken, the images display at 100% -- not at 100% of the parent container, but at the full size of the image itself, breaking out of its container. Hope this clarifies things!

Browser / DIV | .logo | .crash
chrome 22     | works |  works (same results on my friend's copy of Safari)
opera 11.61   | broke |  broke
ie 9          | works |  broke
firefox 12    | works |  broke

Answer 1

I figured out it using Firebug in firefox 15.0 and got a solution, Hopefully it will work on all browsers.

1. Remove css rules defined for #footer and add those rules in .crash like below:

.crash {
    height: 10%;
    position: absolute;
    text-align: center;
    top: 82%;
    width: 100%;
}

2. Add the following rules:

.footerNav {
    position: absolute;
    text-align: center;
    top: 92%;
    width: 100%;
}  

3. And in .mod-languages replace existing styles with given below:

.mod-languages {
    position: absolute;
    text-align: center;
    top: 96%;
    width: 100%;
}

Additional Notes:

Your HTML structure is looking like this:

<div class="moduletable">
    <div class="custom">
        <div id="logo">
            <a href="http://www.millioncranes.com">
        </div>
    </div>
</div>

So when you wrap moduletable with #footer like below:

<div id="footer">
    <div class="moduletable">
        <div class="custom">
            <div class="crash">
                <a title="CRASH Japan" href="http://crashjapan.com">
                    <img src="/images/crashlogo.png">
                </a>
            </div>
        </div>
    </div>
    .. /*Another moduletable*/
    .. /*Another moduletable*/
</div>

This causing a problem. The style of #footer applying on all moduletable elements inside #footer. So do not need to wrap these elements inside footer. Style your elements like you have styled for #logo, That's it!

Hopefully it will fix your problem in all browsers.