Member Avatar for 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

  • 2 Contributors
  • 4 Replies
  • 184 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Anax

Dani AI

Generated

A few practical pointers that build on what said and address 's symptoms.

First, quick checklist to eliminate the usual culprits: use a valid DOCTYPE (leave quirks mode), simplify the markup (remove table-layout around the nav), and reset the page so the viewport math is predictable. A tiny reset helps a lot:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

If the nav is inside any positioned ancestor (any element with position: relative or absolute) then position: absolute will be relative to that ancestor instead of the viewport — move the nav out or remove the ancestor positioning.

For a modern, robust solution use a viewport-fixed element and horizontal centering with transforms (works in current browsers and avoids fragile negative margins):

#nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

If you must support older IE (IE6-era browsers that do not implement position: fixed), provide an IE-only fallback. Two common approaches are a tiny onscroll/onresize script that repositions an absolutely positioned nav, or an IE-only stylesheet via conditional comments. Example (IE-only CSS using a small JS expression or conditional stylesheet is preferred to CSS expressions because expressions hurt performance).

Finally, validate the page and test after each change. Cleaning the markup and ensuring the nav is not inside a positioned container usually fixes the “hidden 10px / scrollbar” behavior; use the IE fallback only if you need to preserve the fixed visual for very old browsers.

Recommended Answers

All 4 Replies

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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 arse I needed

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.