CODEWITHSUNDEEP
htmlcssgoogle-chrome
Matthew Brown
Matthew Brown

Reputation: 142

Chrome ignoring height of div when page first loads or on refresh

For the website: http://dev.blackboxdesign.co

I am having a rather frustrating issue with Chrome. When I first open my page with Chrome the navigation bar ignores my banner bar and pops to the top, hiding itself under the banner. This problem fixes itself if I click on the homepage link but reappears if I refresh. I have tried forcing a reload if Chrome was detected (but that wasn't so smart because it just made a loop). I tried adding padding to the banner div with

    padding-bottom:1px;

but then I get the same issue except this time the banners don't show. I read on here someone with the same issue said it was to do with Chrome wanting image sizes. But I am unable to define image sizes as they change with the width of the page.

HTML

    <div class="slideshow">
        <div id="banner_bar1"><img src="images/banner5.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar2"><img src="images/banner4.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar3"><img src="images/banner3.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar4"><img src="images/banner2.jpg" width="750px" height="178px" class="banner"></div>
    </div>

CSS

#banner_bar1 {
    margin-top: 0px;
    width: 100%;
    background-color:#313131;
}
/* repeat #banner_bar1 for 2,3,4 changing only background-color */
.slideshow {
    margin:0px;
    padding:0px;
}
.banner {
    display:block;
    max-width: 1300px;
    min-width: 750px;
    width: 90%;
    margin: 0px auto;
}

Oh, I forgot to mention that the problem also fixes itself on window re-size thanks to:

    <script language="javascript" type="text/javascript">
        function Reload(){
            window.location.href = window.location.href
        }
        window.onresize = Reload;
    </script>

Upvotes: 0

Views: 3835

Answers (2)

pwdst
pwdst

Reputation: 13735

As the .banner children of .slideshow have absolute position applied to them, presumably by the cycle plugin you are using, these elements do not form part of the document flow - that is to say these divs and child images do not give any height to the .slideshow container.

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.

See https://developer.mozilla.org/en-US/docs/CSS/position

If you look in your developer tools of choice you will see that the .slideshow div has a height of zero pixels. The same would have happened if you were floating the .banner divs, which is why I asked. If you don't use any developer tools to inspect pages as you were building them, I suggest you consult the documentation of your favourite browser as you will find them absolutely invaluable to see what is happening "under the hood". Chrome in particular has excellent tools, with Opera's dragonfly and Mozilla (both the built in developer tools and the excellent Firebug extension) getting an exceedingly honorable mention.

As the .banner elements will not stretch the parent .slideshow container to give it height, you must manually specify a height to match the contents. In this case 215px, note the use of unit as per my comment - simply stating 215 will not work, or at least not work correctly cross-browser.

I would suggest doing this in your external CSS file which I would edit to read as follows-

#banner_bar1 {
    margin-top: 0;
    width: 100%;
    background-color: #313131;
}

/* repeat #banner_bar1 for 2,3,4 changing only background-color */
.slideshow {
    height: 215px;
    margin:0px;
    padding:0px;
}

.banner {
    display:block;
    max-width: 1300px;
    min-width: 750px;
    height:100%;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 0;
}

This also includes the updates to your margin properties I mentioned in comments.

I'm going to credit defau1t as he was pointing you in the right direction for the answer.

Upvotes: 3

defau1t
defau1t

Reputation: 10619

You could add a CSS property overflow:hidden; to the div containing the banners,

.slideshow{overflow:hidden;}

Upvotes: 1

Related Questions