Why do Firefox and Chrome display this image differently?

Question

My image appears to display differently in chrome and firefox.

Here's a fiddle http://jsfiddle.net/SEOplay/4FGad/2/ open it in firefox and chrome and you will see the image dimensions are different.

Chrome displays the image as I want.

HTML

    <div id="imageContent">
        <div id="bigImgCon">    
<a href="<?php echo $firstImg; ?>" rel="lightbox"><img id="firstImage" rel="lightbox" src="http://placekitten.com/200/400" /></a>

        </div>
    </div>

CSS

div#imageContent {
    width:100%;
    text-align:center;
    margin:0 auto;
}
div#bigImgCon {
    width:100%;
    max-height:300px;
    overflow:hidden;
    position:relative;
    margin-top:10px;
    background-color:red;
}
img#firstImage {
    max-width:100%;
    max-height:100%;
    cursor:hand;
    cursor:pointer;
    display:inline-block;
}

@Vallentin Click on the jsfiddle link provided, open it in Chrome then Firefox. — Matt, Feb 18 '14 at 18:01
@Matt A good, self-contained SO question would include screenshots. — admdrew, Feb 18 '14 at 18:05
@admdrew That makes sense, but I see links to jsfiddle on many CSS-related posts (with no screen shots) — Matt, Feb 18 '14 at 18:19
@Matt Oh totally agreed. I just also know the pain of having to check something in multiple browsers. — admdrew, Feb 18 '14 at 18:22
@Matt some don't have multiple browsers installed. Also yes other CSS related posts don't have screenshots either and use jsFiddle, but all other posts aren't about differences in various browsers. — vallentin, Feb 18 '14 at 18:34
@Vallentin I recently moved to linux and I don't currently have an application that easily screenshots a section of a page without doing print screen and opening up gimp. Call it lazy but this was pretty straight forward. — UzumakiDev, Feb 18 '14 at 18:38
@Vallentin Help or don't help, but to me it's annoying when "experts" complain about a question where someone made an effort to provide a lot of detail. Maybe it's just me and that doesn't bother anyone else on here. — Matt, Feb 18 '14 at 18:50
@Matt I agree, I don't mind someone suggesting I provide a screenshot and admdrew has a point about self contained questions. To just come in though and not contribute anything to the actual question is a little annoying. Especially if there is already enough information on the page to do that. — UzumakiDev, Feb 18 '14 at 18:59

Matt · Accepted Answer · 2014-02-18T18:46:10.427

1

In firefox, I changed max-height to height and it works the same as Chrome... the first one that sets height to 300px is the one that did the trick.

Update... Take the max-height off of div#bgImgCon and put it on the div#imageContent class instead. It appears to me like that will do the trick for you.

div#bigImgCon {
    width:100%;
    overflow:hidden;
    position:relative;
    margin-top:10px;
    background-color:red;
}
img#firstImage {
    max-width:100%;
    max-height:300px;
    cursor:hand;
    cursor:pointer;
    display:inline-block;
}

edited Feb 18 '14 at 18:46

answered Feb 18 '14 at 18:02

Matt

477
1
5
19

1

Thanks, but I need the 'max-height' for images that are smaller than 300px. – UzumakiDev Feb 18 '14 at 18:07
1

You can still have max-height, but if you want it to display the actual height of the image (same as in chrome), you'll have to include the height attribute. http://www.w3schools.com/cssref/pr_dim_max-height.asp max-height OVERRIDES height. – Matt Feb 18 '14 at 18:09
1

I found this thread on here that looks like it would work as well for you. Just try to set body height in your CSS: http://stackoverflow.com/questions/3925879/max-height-ignored-in-firefox-works-in-chrome-and-safari – Matt Feb 18 '14 at 18:14
Thanks, I'll have look :) – UzumakiDev Feb 18 '14 at 18:17
I still don't quite understand how to make my element have a dynamic height, I'm already using `html, body{height:100%; width:100%;}` – UzumakiDev Feb 18 '14 at 18:33
1

F12 to open developer tools in Firefox, the issue is with the outer container (red image). Again when I check/uncheck max-height in the DOM Inspector for the div#bigImgCon css class, it changes things. I'm continuing to experiment with the CSS in there...if I figure out the dynamic nature of it, I'll let you know. One thing to verify is which browser is actually correct. It looks like Firefox is honoring max-height, Chrome is not. – Matt Feb 18 '14 at 18:40
1

@UzmakiDev Take the max-height off of div#bgImgCon and put it on the div#imageContent class instead. It appears to me like that will do the trick for you. – Matt Feb 18 '14 at 18:42
Yea, you're right, I removed max-height from bigImgCon and put it on first image and it worked great. Thank you. Edit your question and I'll tick you :) – UzumakiDev Feb 18 '14 at 18:46
Ha, just noticed you did. Thanks. – UzumakiDev Feb 18 '14 at 18:47
1

The reason for that is the inner div is inheriting the height/width of the outer div. So to make it "dynamic" you need to control the outer-most container, and not as much on the inner one. I hope that makes sense. – Matt Feb 18 '14 at 18:48

Why do Firefox and Chrome display this image differently?

1 Answers1