[Solved] Unordered list in IE is diagonal

[dryan1144]

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

Code:

• Find Me Online:

• Design Print Ship
• JPG Magazine
• Flickr
• bepeace.org

[dryan1144]

Thanks that worked.

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

Thank you!

[Author]

Posts