overflow hidden fails when its container has percentage height

[Trevor Berman]

I have an elastic layout site. In it I am trying to use a three tiered image as a three state button. The container for this button is limited to the height of one state/tier of the button and has overflow: hidden; applied. This works fine to mask the unseen states/tiers --as long as the height for the container is set in pixels.

!!! My problem !!! As soon as I set the height of the masking container (#paper) as a percentage, to keep the layout elastic, overflow: hidden; fails expanding the container to show all the states/tiers.

I have tried setting all other parent tags with height: 100%; and/or max-height: in em's proportionate to the max-width of my wrap. No luck, no matter what I do this set-up breaks as long as #paper's height is %. Am I breaking some unspoken rule? None of my searching or research into overflow: hidden; is of any help whatsoever.

 
HTML---
<div id="wrap"><img class="full" src="img/home-bckgrnd.jpg" alt="" title="">
 
<div id="header" class="group">
    <div id="logo">
        <a href="#">HUEY CROWLEY</a>
    </div>
 
    <ul id="nav">
        <li id="paper"><a href="pages/paper.html"><img class="full" src="img/paper-link.jpg" alt="" title=""><span class="alt">PAPER</span></a></li>
        <li id="paint"><a href="pages/paint.html"><span class="alt">PAINT</span></a></li>
        <li id="junk-drawer"><a href="pages/junk-drawer.html"><span class="alt">JUNK DRAWER</span></a></li>
        <li id="store"><a href="pages/store.html"><span class="alt">STORE</span></a></li>
        <li id="about"><a href="pages/about.html"><span class="alt">BIO/CV</span></a></li>
        <li id="contact"><a href="mailto:[e-mail]"><span class="alt">CONTACT</span></a></li>
    </ul>
</div> <!-- /header -->
 
 
CSS---
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #444;
    font-size: 62.5%; /* takes 16px (default size for ‘medium’ text in all modern browsers) down to 10px, a nice round number for quikly calculating relative parent/child font-sizes in the time-sensetive real world.
                        From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc.  */
    background: #000;
}
#wrap {
    margin: 0 auto;
    max-width: 192em;  /* = 1920px; */
    /* height: 100%; */
    /* max-height: 152em;  = 1520px; */
}
 
#header {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
#nav {
    /* width: 100%;
    height: 100%;
    border: 1px solid pink; */
}
a .alt { /* text hidden from sight but safe for screen readers, only breaks if user prefs CSS=on images=off */
    /* display: block;
    width: 0;
    height: 0;
    overflow: hidden; */
}
 
/* creates sized opening for portion of 3tiered paper-link button to show through */
/* percentages % used to expand/contract buttons with the entire elastic layout */
#paper {
    display: block;
    /* width: 15%; result of-- 289px-this container/1920px-context of container width --#wrap-- it scales in = .15 */
    width: 289px;
    /* width: 20.25%; */ /* what is the context width if this is the % which displays full size ?  */
    /* height: 6%;  result of-- 95px-this container/1520px-context of container height --#wrap-- it scales in = .06 */
    height: 95px;
    overflow: hidden;
    border: 1px solid red;
}
/* button starts showing only top tier and returns to top tier after being activated*/
#paper a img, a:visited img {
    position: relative;
    margin: 0;
}
/* button moves up showing only middle tier */
#paper a:hover img {
     /* top: -6%; result of-- 96px-this container/1520px-context of container height --#wrap-- it scales in = .06 */
    top: -96px;
    /* top: -101.25%; */
}
/* button moves up showing only bottom tier */
#paper a:active img {
     /* top: -13%; result of-- 190px-this container/1520px-context of container height --#wrap-- it scales in = .13 */
    top: -190px;
    /* top: -195.25%; */
}
 
 

[Death Slaught]

I don't have time to look at it right now, but absolutely positioned elements are removed from the normal flow of the page. Also, when using emphasis it adapts automatically to the font. Take a look at this. I'll look at this more when I have time.


Thanks, Death

[Trevor Berman]

Hey thanks for the feedback.

I have been trying to make this work with a horizontal 3-image button too, thinking that if I could alleviate the vertical overflow (because the elastic layout is based widths) everything would fall into place. Not so. I'm having the same breaking of overflow: hidden; in the horizontal.

I did catch that absolute positioned div separating the container with overflow from basing its relative measurement on the em sized div#wrap. Once I switched it to relative positioning #paper was able to have its width sized relatively. In this situation #paper overflow worked ok as long as the image inside it was fixed dimensions. As soon as I added a class to the image causing it to scale to 100% of its container the overflow failed.

I'm beginning to think trying to constrain a container to a % of an elastic layout while using overflow: hidden; on it in trying to toggle a 3part image, which should also be scalable with the layout, is simply not possible.

[Death Slaught]

I'm not going to be able to mess with this today - three projects plus school is taking up all of my time. Try changing the width from emphasis to pixels. If I'm not mistaken the width of the entire page is increased?

Also, the width you want should ultimately be in pixels. If I'm not mistaken, and someone please correct me if I'm wrong, emphasis is creating the width based on your font's size. In this case 62.5%, and changes depending on your browser and OS - each display fonts differently. The max-width property does not include padding, borders, or margin.


Regards, Death

[Trevor Berman]

Hey Death, & anyone else who should happen to come across this post,
- Totally possible and I figured it out.

Basically you have to size the sliding buttons' containers as a % of the whole ("body" is the context in this case)then, since there are 3 states, the button image has to be given a CSS rule displaying it at 300%. The reason being, the other (background) images here already scale with the layout by having a max-width of 100%. They will expand their container to its max, but since the button image container is a % of the body already, assigning the button images to the max-width 100% rule (.full) caused the image to scale DOWN, filling the % container with ALL of the button but in that lesser space. So overflow didn't even come into play. Once I figured that out I gave the button images %'s 3x that 100 and... it forced the overflow to work showing only one state of the button at a time (moving it left 1/3 by negative margins)with :hover and :active.

Breaks what might be considered a prime-directive of image-sizing for the web but in this case I think it's okay since the button file resolutions are high enough to keep them from looking like garbage.

Anyhow, it works in all major browsers. I'll go ahead and post the site address here once it is done so anyone who is REALLY interested or REALLY bored will have a chance to check out what the rambling above actually does.

-TREVOR