Please help, horizontal navigation using html5 and css3 not working in Firefox

HTML & CSS
1

Hello all, newbie here…I need some expertise.

I found some nice code to build a horizontal nav bar. Works great in Safari & Chrome. But Firefox displays it funky. Havent treaded the IE waters yet, but i suspect it is the same. Any help would be greatly appreciated! Thank you in advance.

Heres the code:

nav{
display: -webkit-box;
display: -moz-box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
background-color:#f5f4f4;

}

nav a{
display:block;
padding: 7px;
color: #333;
-webkit-box-flex:1;
-moz-box-flex:1;
text-align:center;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
text-decoration:none;
}

nav a:hover{
color: #FFF ;
background-color: #a10324 ;
}

nav a:active {
background-color: #a10324 ;
}

<nav>
<a href=“index.html”>Home</a>
<a href=“about.html”>About Us</a>
<a href=“custom_homes.html”>Custom Homes</a>
<a href=“remodels.html”>Remodels</a>
<a href=“#”>Photo Gallery</a>
<a href=“testimonials.html”>Testimonials</a>
<a href=“contact.html”>Contact Us</a>

</nav>

2

Hi colin27. Welcome to the forums. :slight_smile:

You are kind of asking for trouble using such a cutting-edge and only partially supported layout model. For pretty much the same result, you can do that in a much more bulletproof method:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

nav{
display: table;
background-color:#f5f4f4;
width: 100%;
table-layout: fixed;
}

nav a{
display:table-cell;
padding: 7px 0;
color: #333;
text-align:center;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
text-decoration:none;

}

nav a:hover{
color: #FFF ;
background-color: #a10324 ;
}

nav a:active {
background-color: #a10324 ;
}

</style>
</head>
<body>

<nav>
	<a href="index.html">Home</a>
	<a href="about.html">About Us</a>
	<a href="custom_homes.html">Custom Homes</a>
	<a href="remodels.html">Remodels</a>
	<a href="#">Photo Gallery</a>
	<a href="testimonials.html">Testimonials</a>
	<a href="contact.html">Contact Us</a>
</nav>
			
</body>
</html>

If you want the spacing to vary, you could even use JS, which is probably a better option than CSS3 properties that are still on the table. The display: table method works back to IE8, but there are other, older methods that support older browsers, too.

By the way, check out this thread, which give tips on posting code: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics

3

Thanks ralph.m!! That worked out great. Thanks for being nice to the newbie. I will def have to check out the link on posting basics :slight_smile: Super thanks again!

4

Glad I could help, colin. There are some other great sticky threads (such as in this CSS forum) that are well worth reading, too. :slight_smile: