IE7 Issues - unordered list item text overlapping

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

IE7 Issues - unordered list item text overlapping

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: IE7 Issues - unordered list item text overlapping

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: IE7 Issues - unordered list item text overlapping

Post 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 */
}
 
dancrew32
Forum Newbie
Posts: 1
Joined: Mon Feb 11, 2008 11:39 am

Re: IE7 Issues - unordered list item text overlapping

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: IE7 Issues - unordered list item text overlapping

Post by Luke »

alright, thanks homes.
Post Reply