/    Sign up×
Community /Pin to ProfileBookmark

footer overlap in Internet Explorer

I’m not sure how to post the css and corresponding html in this forum yet, so if I make a mistake, let me know.

First, I incorporated a few “fixes” for Internet Explorer to do its job, this one has me confused, however. I’m thinking a margin/padding change would be better and putting the #contentLayer div as full page under everything with padding and another div inside for scrolling would work to fix the error in IE. Am I getting there with that logic?

Here’s the website link:
[url]http://www.imageengineering.com/index2.html[/url]

Here’s the css I’m questioning:

html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:76%;
font-family:Arial;
/* hide overflow:hidden from IE5/Mac */
/* */
overflow: hidden;
/*
*/
}

body {
height:100%;
max-height:100%;
background-image:url(../Images/1200pxpagebkg.gif);
background-repeat:repeat-y;
overflow: hidden;
padding:0;
margin:0;
border:0;
}

#contentLayer {
overflow: auto;
position:absolute;
z-index: 1;
top:118px;
bottom:59px;
left:123px;
right:0px;
background:#fff;
}

  • * html #contentLayer {
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100%;
    max-height:100%;
    width:87%;
    overflow: scroll;
    position:absolute;
    z-index:1;
    border-top:118px solid #fff;
    border-bottom:59px solid #fff;
    border-left:128px solid #fff;
    border-right:116px solid #fff;
    }
  • Artcase (aka Amy)

    to post a comment
    CSS

    2 Comments(s)

    Copy linkTweet thisAlerts:
    @artcaseauthorJun 13.2007 — by not doing it the way I have it set up (which results in float overlap of the contentLayer div over the footer) I end up with this "bug" in IE

    http://www.positioniseverything.net/explorer/unscrollable.html

    doing more research to learn where I need to go.

    Amy
    Copy linkTweet thisAlerts:
    @artcaseauthorJun 27.2007 — Most of the issue comes from having a "position: relative;" in IE's css. I've fixed part of it with a % size modifier, here's the css:

  • * html #contentLayer {

    top:118px;

    left:123px;

    right:0;

    bottom:0;

    height:71%;

    max-height:100%;

    width:81%;

    overflow:auto;

    position:absolute;

    z-index:1;

    border-bottom:58px solid #fff;

    }


  • Amy
    ×

    Success!

    Help @artcase spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.24,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...