| | |
Bottom of Firefox/IE
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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
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
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
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
HTML and CSS Syntax (Toggle Plain Text)
#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
HTML and CSS Syntax (Toggle Plain Text)
#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
Last edited by tgreer; May 8th, 2006 at 10:43 pm. Reason: Added CODE tags. Please use CODE tags!! Removed profanity.
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation:
Solved Threads: 35
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.
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.
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.
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.
![]() |
Similar Threads
- Table = 100% in IE but not in FireFox? (HTML and CSS)
- Problem with ContentPlaceHolder content format in IE, ok in Firefox (ASP.NET)
- plz help a table formatting problem (HTML and CSS)
- h2 bottom border not budging (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: IE issue with floats
- Next Thread: Rounded corners via css: Fine in IE, broken in Firefox
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7






