Horizontal Nav Bar

[thescientist]

www.seasonsnh.com/newsite_testin IE7 the brown nav bar is flush on the right hand side.In FF, there is a little green edge. Any ideas on how to make FF go up flush on the right hand side?it also appears my active pseudo class isn'te quite working. should be green with blueish font when active.

[Ingolme]

It's not extending all the way to the right because there aren't enough <li> elements to take up all that space. Try giving the brown background color to the <ul> element.

[thescientist]

i thought of that, but if i do that, then when i have someone rollover the links, that bit of the nav will stay brown while the li changes green.

[Ingolme]

Well, then what you can do is to remove "float: left" from the last <li> element of the menu. It will expand to take up all the remaining space.

[thescientist]

actually I figured it out (kind of cheating) by assigning fixed width's to the li's.

[thescientist]

siteso it appears I am having some trouble with the :active state part of my CSS and there is a stupid gap on the home page were i took out the sub nav. Can classes apply heights, because I added a class to change the height of the header on the index page only, but it does not seem to work. If you click on 'lodging', I would like the background color of the <li> to be green and have the text color to be a blue when you are on that page. Any thoughts or suggestions?main style sheet (with main nav stylings): www.seaonsnh.com/style.cssindex only style sheet (to set a different height for only that page): www.seaonsnh.com/index.cssI'm sure I could just condense the index style into the main style, but I thought separating them would change the outcome. no difference then if it doesn't work either way, haha. :)anywho, off to try and fix the image map on the lodging page. works in FF, but not in IE

[dsonesuk]

why don't you just assign a active class to the link on that specific page you are currently vistiing ie. contact page make the contact page link <a href="#" class="active">#main_nav ul a.active { enter required css formating }you could use javascript + dom to find out what current page you are on, find the link, and then make the necessary changes.such as:<script type="text/javascript" language="javascript"><!--//--><![CDATA[//><!--links = document.getElementsByTagName("a");total_links = links.length;for (i=0;i<total_links; i++){findthis=document.URL;str=links.href;if(str.indexOf(findthis)!=-1){links.style.backgroundColor="#00ff00";}} //--><!]]></script>

[thescientist]

hey, would anybody know why in FF when you click on one of the main nav links, there is a white line on the left?if anybody could be a dear, rather than making a whole thread for something small..... in IE there is a border that appears on the left and right of the content div, which I like. In FF it does not appear, and thus the div is about 2px short on the right. any thoughts?

[dsonesuk]

to see the black border in firefox change border style to solid, it also might a good idea to make this border color: black #000 as the moz is for FF? (so why did the border show in IE? good question) #content_holder {background-repeat:no-repeat;border-color:-moz-use-text-color;border-style:solid;border-width:0 1px;clear:both;margin-left:10px;width:758px;}i don't think it is a white border effect showing left of button, but part of the selection rectangle. see http://www.htmlgoodies.com/beyond/javascri...cle.php/3471171

[Ingolme]

why don't you just assign a active class to the link on that specific page you are currently vistiing ie. contact page make the contact page link <a href="#" class="active">#main_nav ul a.active { enter required css formating }you could use javascript + dom to find out what current page you are on, find the link, and then make the necessary changes.such as:<script type="text/javascript" language="javascript"><!--//--><![CDATA[//><!--links = document.getElementsByTagName("a");total_links = links.length;for (i=0;i<total_links; i++){findthis=document.URL;str=links.href;if(str.indexOf(findthis)!=-1){links.style.backgroundColor="#00ff00";}} //--><!]]></script>

You seem go all out with Javascript solutions for every CSS problem.It's not recommended, not only because of the people who don't have Javascript enabled, but also because if you have too much Javascript running as the page loads, the browser can go slow or even freeze.By the way, the language attribute for the <script> element is deprecated (only supported for backwards comptibility).

[dsonesuk]

You seem go all out with Javascript solutions for every CSS problem.It's not recommended, not only because of the people who don't have Javascript enabled, but also because if you have too much Javascript running as the page loads, the browser can go slow or even freeze.

Well good job i supplied the css solution first, then wasn't it. I don't think 12 or so lines (unless it is IE of course, cuz it is ssssssooooo ssssssslllllllooooowwww anyway) is going to make that much difference, i mean its less than what the great suckerfish used to produce its hover effect, and anway it was only an alternative, i just like to cover all options. and guess what! the css option was chosen yippee! i have no problem with that. Next problem, that i know can be fixed with js, but no-one has come up, i get them to contact you first, too give me the ok to provide it, ok problem solved.

[dsonesuk]

Oh forget it i can't be bothered.