Grow your CSS skills. Land your dream job.

Does Firefox ignore max-width? Image is much too big

  • # December 19, 2012 at 3:43 pm

    Hey guys,

    I’m working on a new site. There’s still much to do, but I have a failure, that I don’t get fixed by myself.

    http://yellow-bull.bplaced.net/
    If I open this site in Chrome, everything looks nice and as it should. If I open it in IE, it’s crap… but that’s ok ;)
    But if I open it in Firefox, it’s crap as well. It looks like Firefox ignores the “max-width=100%” and stretches the image as large as it can be. So the layout is over 100% width…

    Do I look at the wrong position or where is the “bad” code?

    Thanks in advance!

    # December 19, 2012 at 4:32 pm

    @Webbster; it’s falling apart in every browser not only those you mentioned. Chrome does same thing on 24″ monitor like IE and FF on smaller ones. You need to wrap the whole thing in container at least something like this.

    #container {
    width:100%;
    max-width:1200px;
    min-width:640px;
    margin: 0 auto;
    overflow:hidden;
    }

    Edit: You can change min-width of container to whatever suits you.

    # December 20, 2012 at 1:16 pm

    @jurotek; thanks for your answer. I tried this, but it didnt’t work for me…
    After putting a container with max-width: 1200px or something similar, the layout looks like this:
    http://yellow-bull.bplaced.net/
    And if I’m setting 1200px to something greater, the whole design looks like in the first post, the image is to big then. I already found out, that, if I’m using a fixed width for the set_content-Element, everything is ok. But unfortunately that’s not, what I want.

    Here’s a part of the code for the set_content:


    @media only screen and (min-width: 90em) {
    .set_content {
    width: 50%;
    font-size: 150%;
    padding: 2em 10%;
    }
    .headerimage {
    width: 70%;
    }
    }

    As a container, I now used the one from jurotek.

    # December 20, 2012 at 2:09 pm

    Hey Webster
    I’m not sure this will solve your problem. But, if removing “float: left” on div id “primary” and also removing the “max-width” on div id container, it seems to work better (at least in Safari).

    The lower part (bellow the nav) keeps centered and have the same width as the upper part (header).

    Note. Looks like the header image is not big if enough for *big* screens – over 110 em it will not fill out over the white area. But that is quite wide, so maybe nothing to worry about…

    // Magnus

    # December 20, 2012 at 4:10 pm

    @magnus_vb: Yeah, it’s working! You are my hero of the week! :D
    And thanks for the note; I will put a max-width with a very high amount over all, so at really big screens, this shouldn’t be a problem. Thank you guys!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".