Forums

synic

Alright, so I have an UL with 8 list items in it that are displayed inline. Each item is a 50x50 image. Everything is fine and dandy in Firefox, but in IE7 the last list item jumps down a line and is underneath the first list item.

Here is the CSS for the UL:


ul#biographies										 { background: transparent; 
													   position: relative;
													   border-bottom: 3px solid #2a2a2a;
													   padding-bottom: 10px;
													   top: 30px;
													   width: 100%; 
													   list-style: none;
													   height: 60px; }
										  
ul#biographies li			 						 { display: inline;
													   padding: 0 5px 0 8.5px;
													   float: left; }

ul#biographies li a									 { display: block; }

ul#biographies li a img				 				 { border: thin solid #2a2a2a; 
													   padding: 2px 2px 2px 2px;}	

ul#biographies li a img:hover						 { border: thin solid #ffffff; }

It's probably something dumb, but I don't know what's making the last item jump to another line only in IE. :?

synic

Lol..

Ok, I think I figured it out just now...

In IE7 the borders of the images are thicker than the ones in Firefox. When I changed the right padding from 8.5 (I don't know why I had this as a decimal in the first place) to 7, the images lined up correctly in IE and just moved a little to the left in Firefox.

Wow..

treehouse : what would you like to learn today?

Forums

Unordered list problem in IE 7