View Full Version : vertical unordered list bug in IE

05-19-2007, 11:42 AM
I have the following vertical unordered list. In Mozilla it works good but in IE there is an extra 2px padding on every list entry.
I've made some research on the internet trying to find out ways of solving this problem. And one thing I've found is that by putting "height: 0px" on every individual list style, the problem gets solved in IE, but in Firefox the entire list crumbles down to some crazy overlapping text.
I've been testing trial and error methods of changing padding values, margin values, overflows... and nothing is working for me so far. I've been spending a lot of time to no avail...it's getting really frustrating.
If anyone could help solve this problem, and save me hours of :mad: i would appreciate it.
Here is the list:

<div class="showcase_a" id="showcase">
<ul id="list">
<li>Generates revenue & marketing information</li>
<li>Builds crowd participation and interaction</li>
<li>Chat room like interaction</li>
<li>DJ shouts and requests on screen</li>
<li>Range of advertising opportunities</li>
<li>Fast gateway delivery</li>
<li>Data capture and export facilities</li>
<li>Advanced message filter system</li>
<li>Bans on abusive users</li>
<li>Online statistics</li>
<li>Custom reporting</li>
And then the stylesheet:

.showcase_a ul {
font: 11px arial;
color: black;
text-align: left;
padding: 0px;
margin: 10px 30px;
.showcase_a li {
margin-top: 5px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
color: white;
Oh...never mind those ids. That was just me trying to create a javascript that would detect a browser and change the height of the list based on the browser being used. And like most of the time, I failed at it.

05-19-2007, 11:56 AM
You have to adjust the line-height of the li.

.showcase_a li {
color: #000;

05-19-2007, 02:03 PM
WOW...Thank you so much aerospace engineer.
line-height...never heard of it before. I am going to look into it.
But anyways, thank you very much.