Mental Jetsam

By Peter Finch

CSS position:fix not working on IE 7

Posted by pcfinch on June 9, 2010

I was trying to create a fixed button bar, at the top of the page, on Internet Explorer 7 using JQuery but I could not get the bar to stay at the top. The CSS property “position:fixed” lets you fix the location of a HTML element on a page so when the rest of the page is scrolled, using the scrollbars for example, the element stays in the same location in the browser window. I found that adding the following DOCTYPE to the top of the pages fixed the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    .css("width", "100%")
    .css("zIndex", "100") 
<body style="margin:0 0 0 0">
<div id="bar">The bar goes here...</div>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: