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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post

    why does a element need "float left" for inline list items to display properly?

    here's where i'm messing around:

    http://professorcuddlecore.com/about/skye3.html

    why is it that this

    HTML

    Code:
    <div id="menu">
    <ul>
    
    <li><a href=""><img src="/jpgs/images/skye_menu_01.jpg" /></a></li>
    <li><a href=""><img src="/jpgs/images/skye_menu_02.gif" /></a></li>
    <li><a href=""><img src="/jpgs/images/skye_menu_03.gif" /></a></li>
    <li><a href=""><img src="/jpgs/images/skye_menu_04.gif" /></a></li>
    <li><a href=""><img src="/jpgs/images/skye_menu_05.gif" /></a></li>
    </ul>
    CSS

    Code:
    #menu {
    position: absolute;
    top: 0px;
    left: 0px;
    }
    
    ul {
    margin: 0; 
    padding: 0;
    list-style: none;
    }
    
    li {
    display: inline;
    }
    
    img {
    margin: 0; padding: 0;
    border: none;
    }
    
    a {
    margin: 0; padding: 0;
    border: none;
    text-decoration: none;
    display: block;
    float: left;
    }
    this only works when i use float:left with the a element? why doesn't margin/padding to 0 on everything (i've tried * and html) work? i don't know why the a is block displayed either but it's recommended so i'm doing it. i just don't understand why.

    this guy explains how it works but doesn't explain why:

    http://line25.com/tutorials/how-to-c...age-2#comments
    Last edited by mlg5454; 09-04-2011 at 11:50 PM.

  • #2
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Yeah, I'd also like to know why as well.
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question

    bump bump pumbp

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    A block element displays as block on its own line. Now, if you make the list items display inline but the child anchors display as block, this is kind of overriding it. Since block elements are typically not allowed inside inline elements different browsers treat such a case differently and in the best case the layout gets screwed up unpredictably.

    With float: left; you make block elements display next to each other (or rather make the element(s) following the one with the float property float around it). However, since elements with float are kind of being treated as block elements, too, the inline style of the list items is still getting in the way. I recommend to float the list items, too, if the anchors are being treated as block level elements.

  • Users who have thanked VIPStephan for this post:

    mlg5454 (09-05-2011)

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    that's really informative, thanks so much.


  •  

    Posting Permissions

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