/    Sign up×
Community /Pin to ProfileBookmark

Having problems with a fixed header :(

Copy linkTweet thisAlerts:
Jan 12.2010

Greetings forums,

I’m designing a website as a favor to a family member. They had requested that the header (including the main navigation) be fixed, so that it always maintains visibility through out the page.

I ended up setting the header to a position of fixed with a white image behind it also with a fixed position. Everything looks fine in FF, Safari, Chrome, and IE8 (other than some horizontal alignment issues in IE8). But when I pull it up in IE7, the header isn’t even there.

Can anyone help me out? Ive read that early versions of IE7 dont support fixed positioning, but that was changed later on. Is there a fix for this? Or is there another way to accomplish the same effect across all browsers? Any guidance or advice would be greatly appreciated.

Thanks.

The sample page can be viewed at [url]http://www.inthelaboratory.com/fogco[/url]

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@tjedgarJan 12.2010 — IE has always struggled with the fixed position element, by placing the following in your style sheet it will fix your positioning woes (well it should).

[CODE]
.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* position fixed Bottom */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* position fixed Left */{position:fixed;right:auto;left:0px;}
.fixed-right /* position fixed right */{position:fixed;right:0px;left:auto;}

* html,* html body /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 position fixed right */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 position fixed Bottom */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 position fixed Left */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
[/CODE]
however it is using expressions in the CSS which means that your stylesheet will not validate
×

Success!

Help @imsolevi 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.6,
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,
)...