Forums

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

#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

 <ul id=\"online\">
		 	 <li><h2 id=\"online-header\">Find Me Online:</h2></li>
			 <li class=\"dps icon\"><a href=\"http://designprintship.com\">Design Print Ship</a></li>
    	                 <li class=\"jpg icon\"><a href=\"http://jpgmag.com/people/dryan1144\">JPG Magazine</a></li>
    	                  <li class=\"flickr icon\"><a href=\"http://flickr.com\">Flickr</a></li>
			 <li class=\"bepeace icon\"><a href=\"http://bepeace.org\">bepeace.org</a></li>
          </ul>

virtual

Add float: left to the li class icons.

dryan1144

Thanks that worked.

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

Thank you!

treehouse : what would you like to learn today?

Forums

[Solved] Unordered list in IE is diagonal