Grow your CSS skills. Land your dream job.

[Solved] Unordered list in IE is diagonal

  • # February 18, 2010 at 4:21 am

    I’m pretty new to CSS so maybe i am missing something obvious -

    In the footer of http://anandaphoto.com/test , the icons under the sub-heading Find Me Online are supposed to be in a straight line. Instead, they are diagonal in IE 7. Firefox is fine.

    Any suggestions?

    Thanks.

    CSS

    Code:
    #online {float:right; margin-right:40px; width:350px;}
    #online li a {float:left; display:block;}
    li.icon a {margin:0 5px 0 5px; text-indent:-9999px; height:75px; width:75px; background:url(images/icons.gif) no-repeat;}

    li.dps a {background-position:0 0; }
    li.dps a:hover {background-position:0 -75px; }
    li.jpg a {background-position:-76px 0; }
    li.jpg a:hover {background-position:-76px -75px; }
    li.flickr a {background-position:-151px 0; }
    li.flickr a:hover {background-position:-151px -75px; }
    li.bepeace a {background-position:-225px 0; }
    li.bepeace a:hover {background-position:-225px -75px; }

    Markup

    # February 18, 2010 at 5:33 am

    Add float: left to the li class icons.

    # February 18, 2010 at 2:23 pm

    Thanks that worked.

    I was adding float to the anchor element not just plain old li.icon

    Thank you!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".