CODEWITHSUNDEEP
css
gramblestown
gramblestown

Reputation: 273

CSS not resizing images in certain browsers

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:

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

Upvotes: 3

Views: 168

Answers (3)

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

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.

Upvotes: 3

Robin Winslow
Robin Winslow

Reputation: 11502

I'm afraid I only have a chromebook here, so I can't test on any non-webkit browser, but here's my guess:

For the rendering engine to know how to apply height: 100% it has to know for sure the height of the container element. People have wrestled with 100% height for a long time.

First, I would make sure your a is display: block so that the img definitely knows how high its container is.

Then I would play around with setting explicit heights for the imgs container elements, and see if any of those fix it - then when you know what the problem is you can find a solution. Hopefully.

Let me know how you get on.

Upvotes: 0

barefootliam
barefootliam

Reputation: 619

Not all browsers support max-height; see http://caniuse.com/#search=max-height

You don't really say what aspect of the result you don't like: what exactly is the difference between what you expect to happen and what actually happens?

Upvotes: -1

Related Questions