Display problem

  • Author
  • #890980


    I have a godaddy site and the “share this” box works but, when it drops down it goes behind the footer. Thus, I can’t see the links.
    Blog url: http://www.higherheightsconsultingllc.com


    That is not happening because of anything the “share this” box does—it’s a result of how your theme is designed. Three things are affecting how that drop-down box appears.

    First, several of the containing blocks surrounding the content area where the “share this” box is placed set the “overflow” value to “hidden.” That is preventing the drop-down content from appearing below the content area at all. Changing the overflow value to “visible” (or deleting “overflow”) for the .Sheet, .Post, and .contentLayout .content selectors will fix that part. (Example to follow.)

    Second, “.Footer” is inside “.Sheet” in the HTML hierarchy. This makes it impossible to make any other child element of “.Sheet” (i.e. the “share this” box) appear above “.Footer” because in the context of that layout “.Footer” must appear at the top of the stacking order inside “.Sheet” for it to be visible at all. To fix that, you must move the “.Footer” div outside of “.Sheet” so they are on the same level. (Example to follow.)

    Third, if you resolve the overflow and sibling stacking order problems, at that point you can adjust the “z-index” property for “.Footer” to make it appear just behind “.Sheet” in the stack and therefore any drop-down box at the bottom of the “.Sheet” div inside the content will not get covered up by the “.Footer” div. (Example to follow.)

    Here is an example that you can use as a starting point to change your theme design to make the drop-down box work:

    1. Move the “.Footer” div outside of the “.Sheet” div so it sits on the same level. Both will be child elements of the “.Main” div. Look at the HTML in this example to see what I mean: http://cl.ly/GgMi/o

    2. Remove “overflow: hidden;” from the .Sheet, .Post, and .contentLayout .content blocks in your CSS or add a new rule that sets those to “overflow:visible;” instead. Set the “.Footer” z-index to -3. Here is an example of the CSS you can add to the bottom of your style.css file for testing:

    .contentLayout .content {
    .Footer {
    	z-index: -1;

    3. After that, you’ll need to adjust the CSS a little further to tighten up the spacing and get rid of the rounded corners that are no longer necessary on your own. Please hire a web developer if you need further help with that part.

    The following screenshot illustrates how I was able to fix the problem where the “share this” box wasn’t visible past the content area in your theme on the http://higherheightsconsultingllc.com/ site. It shows the HTML hierarchy change and the CSS edits to get you started:

    Picture 2.png

    Hopefully I explained the solution okay. CSS stacking context can get pretty tricky if you are using a theme with complex stacking rules such as many “overflow” and “z-index” properties. If you’re interested in learning more about stacking context, I would recommend this article:

The topic ‘Display problem’ is closed to new replies.