Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    vertical unordered list bug in IE

    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 i would appreciate it.
    Here is the list:
    Code:
    <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>Competitions</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>
    </ul>
    </div>
    And then the stylesheet:
    Code:
    .showcase_a ul {
    	list-style-type:disc;
    	font: 11px arial;
    	color: black;
    	text-align: left;
    	padding: 0px;
    	margin: 10px 30px;
    	}
    .showcase_a li {
    	text-align:left;
    	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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You have to adjust the line-height of the li.
    Code:
    .showcase_a li {
    	text-align:left;
    	margin-top:5px;
    	color: #000;
    	line-height:12px;
    	}
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •