Positioning and Height not working correctly in Firefox/IE

[ferdia]

Hi folks! Newbie here, I’m hoping one of you fine people can see through the cloud of confusion I seem to have built for myself.

I am in the middle of building a responsive landing page for a company and the position of the CTA is refusing to work outside of chrome. Here is is working perfectly in chrome, reducing in size as I want it to: http://hydraservers.net/builds/

The following CSS is achieving that.

#page1Container {
    max-height: 700px;
    min-height: 700px;
}

#page1Background {
    background: #c5c5c5 url(../../../media/bg.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding-bottom: 23.5%;
}

#page1Container .page1CTA {
    width: 1400px;
    height: 100%;
    margin: auto;
}

#page1Container .page1CTA #page1CTApos {
    position: relative;
    top: 26%;
}

Along with the following DIV structure:

<div id="page1Container">
    <div id="page1Background">
        <div id="adjustMe" class="page1CTA">
            <div id="page1CTApos">
                <h1><?php echo $config['homeHead1']; ?></h1>
                <h2><?php echo $config['homeHead2']; ?></h2>
                <div class="page1Button"><a href="get-started.php">Start Your Free Month</a></div>
            </div>
        </div>
    </div>
</div>

Chrome is absolutely nailing what I want to achieve, but Firefox and IE are both falling over. Any ideas of what I am missing? Bare in mind the responsive nature of the background.

[paulob]

Hi,

I think the problem is that in your #page1container you set a min-height and a max-height of 700px and according to the specs you can’t then base a percentage height inner element on min or max height.

#page1Container {
    max-height: 700px;
    min-height: 700px;
}

Try setting a height instead of the min and max because effectively that’s what you are saying anyway when you use both with the same unit value:

e.g.

#page1Container {
    height: 700px;
}

I would think that in this instance Chrome was the one doing it wrong :) (Assuming my guess is correct of course).

I think you may also find that once that is working you will have other problems as inner heights will start working and I see you are throwing in a number of 100% height + padding which will result in a greater height than you think.

You will then probably need to remove height:100% from #page1Background .

[ferdia]

Hi there,

First of all thanks for replying!

The problem is I can’t force a fixed height for more than just the largest versions of the website, because the height of the div in question is dynamic, to allow for the background to adjust. The reason it has a fixed height once it reaches a certain width, is to stop the footer from getting pushed down too far.

I have set the background to height 700 for the moment for you to have a look, but you will see that while it looks perfect at the large width, once the responsive design kicks in and I allow the height of the div to decrease, the CTA snaps back up to the top.

Do you have any idea how I might achieve that effect without the dynamic height of the div? I’ve even tried setting and adjusting a fixed height via JQuery, but it’s not getting me anywhere very fast :(

[ferdia]

Feck it. I just used a bunch of manual top values.

Thanks anyway guys.

[paulob]

Hi,

Sorry, I got delayed but was going to suggest you did something similar for now :)

This is probably of no use to you whatsoever but I would do that page something like this and use automatic vertical alignment of the middle section combined with a sticky footer. No need to work out heights etc.

It’s probably too much for you to consider now but I just thought I’d throw it out there :)

[Author]

Posts