Web Analytics Made Easy -
StatCounter why does a element need "float left" for inline list items to display properly? - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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; Sep 4, 2011, 07:50 PM.

  • #2
    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.”

    Comment


    • #3
      bump bump pumbp

      Comment


      • #4
        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.
        Stop solving problems you don’t yet have!

        Comment


        • #5
          that's really informative, thanks so much.

          Comment

          Working...
          X