SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi colin27. Welcome to the forums.

    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:

    Code:
    <!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/show...Posting-Basics

  3. #3
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 Super thanks again!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Glad I could help, colin. There are some other great sticky threads (such as in this CSS forum) that are well worth reading, too.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •