/    Sign up×
Community /Pin to ProfileBookmark

footerstick issues with IE7

Copy linkTweet thisAlerts:
Dec 31.2006

It was just pointed out to me yesterday that I have a footer problem with IE7 and Safari (the only two browsers I didn’t test it in).

I’m using [URL=http://www.themaninblue.com/writing/perspective/2005/08/29/]footerstickalt[/URL] to position the footer properly, and it does work on the majority of browsers…but of course, as more people are made to upgrade to IE7, this is going to become a much bigger problem.

The basic layout of the page is as follows:

[code]
<html>
<head><title>Title</title></head>
<body>
<div id=”header”></div>
<div id=”nonfooter”>
<div class=”right”>Menu Stuff</div>
<div class=”left”>Content Stuff</div>
<div class=”spacer”></div>
</div>
<div class=”footer”><div class=”bottom”></div></div>
</body>
</html>
[/code]

and the pertinent pieces of css are:

[code]
html,body {
margin: 0px 0px 0px 0px;
left:0px;
top:0px;
background-color: #084E1D;
color: #000000;
text-align: center;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 13px;
}

#nonfooter {
position: relative;
min-height: 100%;
left: 0px;
top:0px;
margin: 0px auto;
width: 920px;
text-align: left;
height:100%;
z-index:1;
}

* html #nonfooter {
height: 100%;
left:0px;
top:0px;
}

#footer {
position: relative;
margin: -225px auto 0px auto;
height:3px;
z-index:2;
text-align: center;
width:920px;
}

#header {
position: absolute;
left:0px;
top:0px;
height:3px;
margin:0px 0px 0px 0px;
z-index:4;
text-align: center;
width:100%;
}

.right {
position:relative;
width: 200px;
float:right;
}

.left {
position:relative;
width:630px;
float: left;
padding-top:0px;
padding-left:17px;
padding-bottom:3px;
padding-right:10px;
}

.bottom {
bottom: 0px;
height:225px;
clear: both;
text-align: left;
background-image: url(images/layout/footer.gif);
background-repeat: no-repeat;
}

.spacer {
background-color:#FFFFFF;
height:216px;
width:860px;
clear:both;
}
[/code]

The specifics are at [url]http://www.dryadsong.com[/url] and the stylesheet is at [url]http://www.dryadsong.com/styles.css[/url] .
Since I have *no* familiarity with IE7’s quirks (and not even a hint of experience with Safari) I’m not even sure which piece of code to start with. Any direction would be *much* appreciated.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonJan 01.2007 — Just had a look in various IE's and it's fine in IE7, however it's slightly broken in IE 5.0 and 5.5.
Copy linkTweet thisAlerts:
@dryadsongauthorJan 03.2007 — Weird. Okay, so I don't know why it would work in some IE7s and not others, but I have definitely had about a half-dozen people telling me that the footer will not push to the actual bottom of the page in IE7. So, I looked around, and came across this article on A List Apart:

http://alistapart.com/articles/footers

it eventually mentions a fix that uses javascript to calculate the height of the browser window, detemine if the content is larger or smaller, and place the footer appropriately. I've cobbled it together on two test pages: a short one and a long one. Is there an appropriate place to ask people with different browsers and settings and whatnot to check it out and see if it's broken in any particular configuaration?

My pages are here:

http://www.dryadsong.com/testing-short.html

http://www.dryadsong.com/testing-long.html

any help is truly appreciated. I've gone ahead and looked at it in about four different browsers now, but there are always a couple ones that I can't use, and inevitably there's a problem in one of them.
Copy linkTweet thisAlerts:
@kiwibritJan 03.2007 — Your original page looks fine to me in IE7. I would not use javascript top affect the layout - you can cause problems for those who do not have javascript enabled, and those using devices which do not have javascript.

BTW, your top post is in error; in your actual web page you correctly call up footer as an ID - not as a class as in your post's example.
×

Success!

Help @dryadsong 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.18,
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,
)...