开发者

CSS overflow:hidden with anchor in page

Page: http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr

Same page but linking to the anchor http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr#opportunites

My left and right sides move up.

So i'm using the -4000 margin and 4000 padding method so that my left side has a white background all the way to the bottom no matter how long/short the right side is.

This left and right side arer within a container that is overflow:hidden;

This is the only thing i can see that could make theses elements disapear. Without it tho my page doesnt work correctly.

what can i do to fix this? Doesnt seem to be a normal behaviour for an anchor.

thanks for the help in advance

#topcontent {
    position:开发者_Python百科relative; /* required for ie or 4000px padding/margin visible */
    background-color: #231f20;
    border-left: 1px solid #231f20;
    border-right: 1px solid #231f20;
    overflow:hidden;
}
#topcontent .left {
    position:relative;
    width:703px;
    margin-bottom:-4000px;
    padding-bottom:4000px;
    background:#FFF;
}
#topcontent .right {
    width: 245px;
    float: right;
    margin-bottom:-4000px;
    padding-bottom:4000px;
}


Ugh, well I don't exactly have an answer for you - I tend to design my columnar layouts using the background image method, or same colored sidebars. However I did find some documentation on this particular "bug":

http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

I honestly don't know of another alternative method besides a javascript solution, which I always try to steer clear of. You would have to do some serious design refactoring for the background-image to even become an option.

Best of luck, and I hope that link helps a bit - they have some workarounds


Fastest solution is to give padding-bottom to the overflow:hidden element. In your case it will be

#topcontent { /* Any element with overflow: hidden property */
    padding-bottom: 18px; /* Value in px that will work for you */
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜