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?
IE7 Issues - unordered list item text overlapping
Moderator: General Moderators
Re: IE7 Issues - unordered list item text overlapping
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.
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.
Re: IE7 Issues - unordered list item text overlapping
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.line-height maybe? Hard to really narrow it down because there's so much CSS.
I believe if you don't declare units, it is relative. So...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.
Code: Select all
body {
font-size: 12px;
line-height: 2; /* 24px */
}
Re: IE7 Issues - unordered list item text overlapping
~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:
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:
then markup like this:
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:
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>
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>
~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:
Re: IE7 Issues - unordered list item text overlapping
alright, thanks homes.