Firefox Horizontal Menu Trouble, All Other Browsers are Just Fine
Please have a look here: http://fastforwardacademy.com/ and then have a look here: http://fastforwardacademy.com/index-page-irs-paid-registered-tax-preparer.htm.
In every other browser... IE, Opera, Safari, and Chrome there are no issues, but Firefox 开发者_JAVA百科does not display the menu correctly. Looking at the CSS does anyone have any ideas why?
The root cause is that your HTML is woefully invalid:
http://validator.w3.org/check?uri=http%3A%2F%2Ffastforwardacademy.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
The specific error in question is this:
Line 126, Column 103: document type does not allow element "LI" here
…decoration:none;"><li class="current1">HOME<br /><span>Fast Forward Academy</s…The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
You're nesting an li element inside an a element (also inside a ul element). This is invalid, and is causing Firefox to, shall we say, puke?
An appropriate choice of word, because the Firefox bug in question is called..
The Vomit Bug
Your source code looks like this:
<ul>
<a href="index.php" name="Fast Forward Academy" style="text-decoration:none;">
<li class="current1">HOME<br /><span>Fast Forward Academy</span></li>
</a>
..
</ul>
But Firefox (version 3, this is fixed in Firefox 4) munges it into this (checked with Firebug):
<ul>
<a style="text-decoration: none;" name="Fast Forward Academy" href="index.php"></a>
<li class="current1">
<a style="text-decoration: none;" name="Fast Forward Academy" href="index.php">HOME<br><span>Fast Forward Academy</span></a>
</li>
..
</ul>
So, the fix is to place your a elements inside your li elements, instead of the other way around. You will also have to switch around some CSS.
On an unrelated note..
Your doctype is this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
But the next line of source code is this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
and you're using <br />.
You might want to change your doctype to this; the XHTML Transitional doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The problem is padding for .main_nav ul li a:hover, .main_nav ul li.current. Padding is applied once when you click on the click and a second time on hover and that is making the link go out of alignment. You don't need padding on hover.
After
.main_nav ul li a:hover, .main_nav ul li.current
Add
.main_nav ul li a:hover{
padding:0;
}
加载中,请稍侯......
精彩评论