Page 1 of 1

IE7 Issues - unordered list item text overlapping

Posted: Thu Apr 03, 2008 8:44 am
by Luke
It may just be too early in the morning. I'm trying to add 4 unordered lists of brands onto http://www.bagselect.com. For some reason it works fine in IE 6 and fine in firefox, but in ie7, if a list item spans multiple lines, it overlaps the list item below it. I can't figure out what the problem is. Admittedly this home page is somewhat thrown together haphazardly, but still I dont know that it's the reason for this strange behavior. If you have IE7 take a look at this page (under "Also available at BagSelect"):

http://www.bagselect.com/?Screen=broken-sfnt

Any ideas why this is happening?

Re: IE7 Issues - unordered list item text overlapping

Posted: Thu Apr 03, 2008 10:14 am
by pickle
line-height maybe? Hard to really narrow it down because there's so much CSS.

I also noticed you've got no units on some of your line-height declarations. Not sure what happens if you don't have it.

Re: IE7 Issues - unordered list item text overlapping

Posted: Thu Apr 03, 2008 10:29 am
by Luke
line-height maybe? Hard to really narrow it down because there's so much CSS.
Nothing I've done with line-height seems to make a difference. And yea I know this site is kind of a mess, but it's a product of way too much to do and way too little time to do it.
I also noticed you've got no units on some of your line-height declarations. Not sure what happens if you don't have it.
I believe if you don't declare units, it is relative. So...

Code: Select all

 
body {
    font-size: 12px;
    line-height: 2; /* 24px */
}
 

Re: IE7 Issues - unordered list item text overlapping

Posted: Sat Apr 05, 2008 8:41 pm
by dancrew32
~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


I found that putting each ul in a div solves the issue.

This might not match up with the current stylesheet on the live site, but this method works:

Code: Select all

 
<style type="text/css">
    .brands-list  {
        float:left;
        text-align:left;
    }
    .brands-list ul {
        list-style:none;
    }
    .brands-list li {
        clear:left;
        float:left;
        width:80px;
        margin:1px 0;
        background-color:#fff;
    }
    .brands-list a {
        display:block;
        width:100%;
        color:#000;
    }
    .brands-list a:hover {
        background-color:#eee;
    }
</style>
 
then markup like this:

Code: Select all

 
<div class="brands-list"> 
<ul>
<li><a href="http://www.bagselect.com/bags/digital-lifestyle-outfitters">Digital Lifestyle Outfitters,</a></li>
<li><a href="http://www.bagselect.com/bags/eagle-creek">Eagle Creek,</a></li>
<li><a href="http://www.bagselect.com/bags/ellington-leather">Ellington Leather,</a></li>
<li><a href="http://www.bagselect.com/bags/f-stop">F-Stop,</a></li>
<li><a href="http://www.bagselect.com/bags/fujifilm">FujiFilm,</a></li>
<li><a href="http://www.bagselect.com/bags/ful">Ful,</a></li>
<li><a href="http://www.bagselect.com/bags/gravis">Gravis,</a></li>
<li><a href="http://www.bagselect.com/bags/griffin">Griffin,</a></li>
<li><a href="http://www.bagselect.com/bags/high-sierra"><span class="emphasis">High Sierra,</span></a></li>
<li><a href="http://www.bagselect.com/bags/higher-ground">Higher Ground,</a></li>
<li><a href="http://www.bagselect.com/bags/intec">Intec,</a></li>
<li><a href="http://www.bagselect.com/bags/jansport"><span class="emphasis">Jansport,</span></a></li>
<li><a href="http://www.bagselect.com/bags/jensen">Jensen,</a></li>
<li><a href="http://www.bagselect.com/bags/jumeau">Jumeau,</a></li>
<li><a href="http://www.bagselect.com/bags/kensington">Kensington,</a></li>
<li><a href="http://www.bagselect.com/bags/kiva-designs">Kiva Designs,</a></li>
<li><a href="http://www.bagselect.com/bags/lewis-n-clark">Lewis N. Clark,</a></li>
<li><a href="http://www.bagselect.com/bags/lowe-alpine">Lowe Alpine,</a></li>
<li><a href="http://www.bagselect.com/bags/lowepro">Lowepro,</a></li>
<li><a href="http://www.bagselect.com/bags/manhattan-portage">Manhattan Portage,</a></li>
</ul>
</div>
 
<div class="brands-list"> 
<ul>
<li><a href="http://www.bagselect.com/bags/digital-lifestyle-outfitters">Digital Lifestyle Outfitters,</a></li>
<li><a href="http://www.bagselect.com/bags/eagle-creek">Eagle Creek,</a></li>
<li><a href="http://www.bagselect.com/bags/ellington-leather">Ellington Leather,</a></li>
<li><a href="http://www.bagselect.com/bags/f-stop">F-Stop,</a></li>
<li><a href="http://www.bagselect.com/bags/fujifilm">FujiFilm,</a></li>
<li><a href="http://www.bagselect.com/bags/ful">Ful,</a></li>
<li><a href="http://www.bagselect.com/bags/gravis">Gravis,</a></li>
<li><a href="http://www.bagselect.com/bags/griffin">Griffin,</a></li>
<li><a href="http://www.bagselect.com/bags/high-sierra"><span class="emphasis">High Sierra,</span></a></li>
<li><a href="http://www.bagselect.com/bags/higher-ground">Higher Ground,</a></li>
<li><a href="http://www.bagselect.com/bags/intec">Intec,</a></li>
<li><a href="http://www.bagselect.com/bags/jansport"><span class="emphasis">Jansport,</span></a></li>
<li><a href="http://www.bagselect.com/bags/jensen">Jensen,</a></li>
<li><a href="http://www.bagselect.com/bags/jumeau">Jumeau,</a></li>
<li><a href="http://www.bagselect.com/bags/kensington">Kensington,</a></li>
<li><a href="http://www.bagselect.com/bags/kiva-designs">Kiva Designs,</a></li>
<li><a href="http://www.bagselect.com/bags/lewis-n-clark">Lewis N. Clark,</a></li>
<li><a href="http://www.bagselect.com/bags/lowe-alpine">Lowe Alpine,</a></li>
<li><a href="http://www.bagselect.com/bags/lowepro">Lowepro,</a></li>
<li><a href="http://www.bagselect.com/bags/manhattan-portage">Manhattan Portage,</a></li>
</ul>
</div>
 
It's kind of a 'divitus' solution, but it works in ie6, ie7, ff, etc... =]


~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.

Re: IE7 Issues - unordered list item text overlapping

Posted: Mon Apr 07, 2008 11:44 am
by Luke
alright, thanks homes.