Issues with floating li
I was working on babybag.com and was dealing with a php populated list of products. My first problem was a display issue with the right column in Internet Explorer 6 (weird, a display issue with IE6 ;p). IE 6 deals with margin and padding CSS rules strangely and often times breaks out of the set widths of the columns. The first step in fixing this issue was setting new margins on the <li>s that were being generated around the products. Here is one of the product pages so you can view the code if you want. Once those margins were adjusted and were spaced to look presentable in Firefox and IE I ran into another issue, this time in Firefox.
Some of the product titles were so long that there were too many lines of text and were preventing some of the other <li>s to not float correctly. The fix was very easy. All that was needed to correct the float issue was to set a specific height on the <li>s that wasn’t too tall and create weird spacing between the lists. Once the height was set all the elements floated correctly and the page viewed properly in both IE6 and Firefox.
Usually I avoid setting heights for the most part because I like my elements, especially with dynamic content, to be expandable. But since I knew that the titles on the products would most likely not push the <li> more than 200px tall I felt okay setting the height. If you have any questions feel free to send me an email, just use the contact form.
