Navigation aren't clickable in Firefox.

I have this site here. My horizontal nav menu aren't clickable at all and I don't know why? I'm thinking it has something to do with the search bar but not sure how to remedy this. It looks fine in IE. Thoughts?

 

Yeah, I think so too. You have your CSS in what seems to be a random order. This can be dangerous as something further down on your page can be overriding something above it.

Mostly, it's how you've set up the menu and then the form is dispay: inline which I don't think you want... You'd prolly want to float it instead. Then make masthead contain the floats with overflow: hidden (though this might not be a great choice if the text is lost upon text-enlarge).

#navmenu {
Set a width here, maybe in em or something flexible
float: left; (you can float the whole menu to make it show side-by side next to the form, fine, but set a width on your floats)
	}
#navmenu ul, #navmenu li { (added li in case IE ignores)
	list-style-type: none;
	}
#navmenu li {
  display: inline; (this will take care of IE7 for you)
}
#navmenu a {
        float: left; (this makes them line up, while being display: block so you can set margins and things, and prevents IE whitespace bug)
	font-weight: bold;
	font-size: 1.2em;
	margin: 5px 5px 0 20px;
	color: #fff;
	text-decoration: none;
	}

#navmenu a:hover, #navmenu a:active {
(don't need to repeat, :active will inherit from a)
	background-color: #5c3227;
	}	

Code (markup):

Then you could float the form to the right, so the two can sit on the same line.

#masthead {
overflow: hidden;}
or some other float-wrapping method, or have the next element down clear: both.

 

Using FireBug's inspect feature, I noticed that when I hover the mouse over the navigation bar, the P tag inside the form tag (#myform) gets highlighted, this should not happen.
As soon as I got rid of #myform's relative positioning, the links became clickable. However, the search form lost its place. I'm sure you can find a way to put it back in place without compromising your navigation bar.

Bye!

 

Well, try to change your code in css (line 239) to this:

#myform {
float:right;
margin:30px 54px 0 0;
width:300px;
}

Code (markup):

and special for IE:

#myform {
display:inline;
}

Code (markup):

 

Pruad, you can put the two together (though while I always did it at first, now I wait until I see whether IE6 will double the margins or not):

#myform {
float: right;
display: inline;
margin:30px 54px 0 0;
width: 300px;
}

The other browsers will ignore it because floats stay blocks. Which is nice.

 

Hey guys- it was actually even simpler than this. This is what I edited the code to;

#myform {
float: right;
display: inline;
padding: 30px 30px 0 0;
}

and it works on IE6,7, and FF.