The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[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 , 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?



    #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; } a {background-position:-151px 0; } a:hover {background-position:-151px -75px; }
    li.bepeace a {background-position:-225px 0; }
    li.bepeace a:hover {background-position:-225px -75px; }


    # February 18, 2010 at 5:33 am

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed