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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Fire fox: How do I float a list?

    I have only been coding for a little less than a year, but throughout my learning process I have only been testing in chrome. I got my first free client job and just realized that I never taught myself anything about browser compatibility lol. I want the site to work across all browsers so I am dedicating the next few days to browser issues.

    does anyone here know a good resource on common compatibility issues?

    The problem I am having right now is with making a horizontal navigation list in fire fox.

    mark up:
    <ul class= "list_test">
    <a href="#"><li>Hello World</li></a>
    <a href="#"><li>Hello World</li></a>
    <a href="#"><li>Hello World</li></a>
    <a href="#"><li>Hello World</li></a>
    </ul>

    css:

    .list_test a li {
    float:left;
    }

    The list goes horizontal in all of the other browsers except for firefox. Does anyone know what is going on?
    Last edited by spc1029; 08-19-2010 at 07:59 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Your html is invalid - the <a> should be within the <li>, not the other way around:

    Code:
    <ul class= "list_test">
    <li><a href="#">Hello World</a></li>
    <li><a href="#">Hello World</a></li>
    <li><a href="#">Hello World</a></li>
    <li><a href="#">Hello World</a></li>
    </ul>
    with css:

    Code:
    .list_test li {
    float:left;
    }
    I think you'll find that works a bit better in Firefox...

    Some general points on browser compatibility here.

  • #3
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    that would be invalid markup

    an anchor cannot stricly contain a list element - you want a list of links, not a link of lists.

    the correct mark up is

    Code:
    <ul class= "list_test">
    <li><a href="#">Hello World</a></li>
    <li><a href="#">Hello World</a></li>
    <li><a href="#">Hello World</a></li>
    <li><a href="#">Hello World</a></li>
    </ul>
    </ul>
    
    css ~ ul.list_test li { float:left; }
    rule of thumb - if it doesn't display right in firefox, it's wrong.


  •  

    Tags for this Thread

    Posting Permissions

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