Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tabs not displaying correctly in Firefox

    The code below is not displaying correctly in FF. The code looks great in IE but in Firefox you can see most of the bullets in the underlying layer.

    HTML code used

    Code:
    <ul id="navigation">
    <li><span><a href="index.htm">Home</a></span></li>
    <li><a href="#"><span>Vet Services</span></a></li>
    <li><a href="#"><span>Preventative Services</span></a></li>
    <li><a href="#"><span>Boarding</span></a></li>
    <li><a href="#"><span>Grooming</span></a></li>
    <li><a href="#"><span>Staff</span></a></li>
    <li><a href="#"><span>Pet Care</span></a></li>
    <li><a href="#"><span>News</span></a></li>
    <li><a href="#"><span>Location</span></a></li>
    </ul>

    CSS used


    #navigation a
    {
    color: #fff;
    font-weight: bold; font-size: .7em; font-family: Verdana, Arial, Helvetica;
    background: #781351 url('../images/left-tab.gif') no-repeat left top;
    text-decoration: none;
    padding-left: 5px;
    float: left;
    }

    #navigation a span
    {
    background: url('images/right-tab.gif') no-repeat right top;
    padding-right: 5px;
    float: left;
    }

    #navigation a:hover {
    color: #000;
    background: #ffa20c url('../images/left-tab-hover.gif') no-repeat left top;
    padding-left: 5px;
    float: left;
    }

    #navigation a:hover span
    {
    background: url('../images/right-tab-hover.gif') no-repeat right top;
    padding-right: 5px;
    float: left;
    }

    #navigation a, #navigation a span
    {
    display: block;
    float: left;
    }

    /* Hide from IE5-Mac \*/
    #navigation a, #navigation a span
    {
    float: none
    }
    /* End hide */

    #navigation ul
    {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    }

    #navigation li
    {
    float: left;
    margin: 0;
    }
    Also is float: left; required if it is appearing correctly in IE without it, and definitely not appearing correctly in FF anyway?

    Thank you in advance for any advice or suggestions.

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    replace this

    Code:
    #navigation li
    {
    float: left;
    margin: 0;
    list-style:none;
    }
    vineet

  • Users who have thanked vineet for this post:

    arubalisa (12-06-2009)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think your css isn't quite right:

    Code:
     #navigation ul
    {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    }
    should be

    Code:
     ul#navigation
    {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    }

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by arubalisa View Post
    The code below is not displaying correctly in FF. The code looks great in IE
    How it looks in IE means little since IE is the worst browser on the planet. You should be using FF, or any other modern browser, to test your markup in before looking to see how IE screws things up, which is why you are having problems and will continue to do so.


  •  

    Posting Permissions

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