position fixed does not work in IE

Posted on 2005-03-25
Medium Priority
Last Modified: 2008-03-04
Hello Experts,

<style type="text/css">
.box1 {
position: fixed;
left: 1em;
top: 1em;
border: 3px solid black;
padding: .5em;
width: 8em;
text-align: center;
font-weight: bold;
font-size: large;
background: red;
color: white}

<div class="box1">This is a box positioned at a fixed position and should not scroll</div>
Question by:pinaldave
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 30

Accepted Solution

GrandSchtroumpf earned 1800 total points
ID: 13632122
The title of your question is the answer:
Position fixed does not work in IE.

It's just not supported by IE.

Assisted Solution

trevorhartman earned 200 total points
ID: 13632179
you can mimick fixed position using javascript. it's a little choppy but it works.  let me know if you want code/links
LVL 21

Author Comment

ID: 13632228
Thank you Grand.
I did not know that.
Trevorhart.. .thanks for answer.
Actually I am preparing the CSS tutorial so I will mentioned this as a drawback. I will not need the javascript for today. Thank you for offer.
LVL 30

Expert Comment

ID: 13632389
You don't always need javascript to mimic it in IE.
It can be done with css only in some cases.  The result is not that bad, but it's very ugggggly code that is likely to break, so it should be avoided:  http://www.serger.biz/ee/FixedMenu/FixedMenu.html

And using javascript should definitely be avoided.

The best thing is to use "position:fixed" and use a workable non-fixed alternate solution for bad browsers.
You can always have a little message that tells your visitors to use a good browser if they want to enjoy the site's complete functionality.

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month12 days, 18 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question