Mental Jetsam

By Peter Finch

Archive for June, 2010

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""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bar")
    .css("width", "100%")
    .css("height","23px")
    .css("position","fixed")
    .css("zIndex", "100") 
    .css("background","gray")
});
</script>
</head>
<body style="margin:0 0 0 0">
<div id="bar">The bar goes here...</div>
.....
Advertisements

Posted in CSS, HTML, javascript | Leave a Comment »