Trying to fix a menu at the top of a page with CSS alone in IE. Can anyone help?

Guest 58450 · 08-07-2007, 10:36

Hi,

I'd like to have a strip at the top of a page that has my menu and then fix it so that as you scroll down the page, the menu DIV is fixed at the top of the screen.

The code I've got works in Firefox and in Opera, but not in IE.

This is the CSS code (note ** and ** where ** is showing):

PHP Code:


			
body **

  font-family: garamond, serif;

  margin: 0px;

  padding: 0px;

  display:block;

  border:none;

  position:relative;

**





#mainMenu **

  position: fixed !important;

  position: relative;

  z-index: 2;

  top: 0;

  left: 0;

  margin: 0px;

  padding: 0px;

  width: 100%;

  height: 50px;

  background-color: black;

  color: white;

**



#menuLinks ul **

  padding: 0;

  margin: 0;

  text-align: bottom center;

**



#menuLinks ul li **

  list-style: none;

  padding: 0;

  margin: 0 10px 0 10px;

  display: inline;

  text-align: center middle;

**



#spacer **

  position: relative;

  height: 70px;

**



#container **

    position:relative;

**

Here's a link to a test page with the style information in the code:
http://theogb.com/theogb/test_styles.html

In firefox the black div sticks at the top as you scroll but in IE it just scrolls with the rest of the page.

Now the reason I'm assuming this should work is because of this page:
http://www.csszengarden.com/?cssfile...202.css&page=0

I've looked the CSS over but it doesn't seem to help.

Can anyone suggest how I can beat IE into submission over this. No one wants to use frames, obviously.

Padwah · 08-07-2007, 10:58

this: http://www.cssplay.co.uk/layouts/fixed.html looks like it might be of use.

Guest 58450 · 09-07-2007, 06:13

Quote:

Originally Posted by Padwah

this: http://www.cssplay.co.uk/layouts/fixed.html looks like it might be of use.

Thank you, it looks promising.

Guest 58450 · 09-07-2007, 17:36

Okay, interestingly the most important thing to making this work was this line:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Without that this trick doesn't work. Though this is using a different method to the layer method I was using.