Bottom of Firefox/IE

[Anax]

Hia,

I'm frustrated with trying to get a navigation console to sit on the bottom center of page. I'm trying to avoid ever having x or y scroll bars on my site. I can get it to work sweetly on IE using

#nav {
    position:absolute;
    bottom: 0px;
    z-index: 4;
    left: 50%;
    margin-left:-287px;
    height: 110px;
    width: 100px;
}

but that makes the images on nav console go under the bottom of browser viewport on Firefox by about 10px and enables scrolling across.

I can get it to work perfectly on Firefox by simply changing to

#nav {
    position:fixed;
    ...
}

but that isn't recognised by IE and my console ends up top left of screen. I could complain about IE but I'd rather just get it right for both browers.

The site this is being used on is www.readingbus.co.uk

any ideas?

russell

[tgreer]

Please use code tags.

The CSS position attributes depend on how the elements are nested, and how the parent elements are nested, and so on up the chain.

Your page is a bit of a muddle, because you're mixing both DIV elements and TABLES, and the container hierarchy isn't very clear.

The first step is to clean up your page source. If you're going to use DIVs, then use them throughout, consistently. If you're going to use tables, then organize the entire page as a table.

When you mix-and-match, each browser will do it's best to figure out what "contains" what, and then how to apply your CSS.

You also have an incomplete DOCTYPE.

[Anax]

Much appreciated mr greer,

and I see. This, my first site, shows the steep learning curve I underwent, learning the tec stuff having been a Creative. And in the dark months ago I started by cheating using the Dreamweaver Nav Bar set-up which sets up a table. I now try to avoid tables.

The only reason I haven't gone through site changing the nav bar to a css-based horizontal list is my inability to achieve a similar image-rollover effect. I can get one using pseudo classes A:link etc with different background images - but I can only get the changing background to wrap around the single line of the link text. Do you think I can achieve a similar effect as on my current page using css.

[tgreer]

Yes. And if not, then we add a bit of JavaScript.

But before all of that, get the page down to a few nice DIV elements.

[Anax]

OK it's a deal - I'm off to bed as it's 4am Scottish Highlands time, but tomorrow I'll give it a go...

thanks for giving me the inspiring kick up the #### I needed